265 lines
7.6 KiB
JavaScript
265 lines
7.6 KiB
JavaScript
var el = wp.element.createElement,
|
|
registerBlockType = wp.blocks.registerBlockType,
|
|
ServerSideRender = wp.serverSideRender,
|
|
TextControl = wp.components.TextControl,
|
|
InspectorControls = wp.blockEditor.InspectorControls;
|
|
Button = wp.components.Button,
|
|
CheckboxControl = wp.components.CheckboxControl,
|
|
toggleControl = wp.components.ToggleControl,
|
|
__ = wp.i18n.__;
|
|
|
|
registerBlockType("ssa/upcoming-appointments", {
|
|
title: "Upcoming Appointments",
|
|
description:
|
|
__('Displays Upcoming Appointments. You can select what to show in the appointment card.', 'simply-schedule-appointments'),
|
|
icon: "calendar-alt",
|
|
category: "widgets",
|
|
example: {},
|
|
|
|
edit: function (props) {
|
|
var options = [
|
|
{
|
|
value: "No upcoming appointments",
|
|
label:
|
|
"Message to display if customer has no upcoming appointments",
|
|
},
|
|
];
|
|
|
|
var toggleElements = props.attributes.memberInfo.map((toggle, index) => {
|
|
if (toggle.value === 'Display Team Members') {
|
|
return el(
|
|
"div",
|
|
{ className: "ssa-toggle-input-container" },
|
|
el(CheckboxControl, {
|
|
onChange: function (isChecked) {
|
|
const updatedmembersInformation = props.attributes.memberInfo.map((item, idx) => {
|
|
if (idx === index) {
|
|
return { ...item, checked: isChecked ? true : false };
|
|
}
|
|
return item;
|
|
});
|
|
|
|
props.setAttributes({ memberInfo: updatedmembersInformation });
|
|
},
|
|
label: toggle.label,
|
|
checked: toggle.checked,
|
|
})
|
|
);
|
|
}
|
|
|
|
if (props.attributes.memberInfo.find(item => item.value === 'Display Team Members').checked) {
|
|
return null;
|
|
}
|
|
|
|
return el(
|
|
"div",
|
|
{ className: "ssa-toggle-input-container" },
|
|
el(CheckboxControl, {
|
|
onChange: function (isChecked) {
|
|
const updatedmembersInformation = props.attributes.memberInfo.map((item, idx) => {
|
|
if (idx === index) {
|
|
return { ...item, checked: isChecked ? true : false };
|
|
}
|
|
return item;
|
|
});
|
|
|
|
props.setAttributes({ memberInfo: updatedmembersInformation });
|
|
},
|
|
label: toggle.label,
|
|
checked: toggle.checked,
|
|
})
|
|
);
|
|
});
|
|
|
|
var toggledisplayOptions = props.attributes.appointmentDisplay
|
|
.filter(toggle => toggle.label === 'Appointment Types')
|
|
.map((toggle, index) => {
|
|
return el(
|
|
"div",
|
|
{ className: "ssa-checkboxes-input-container" },
|
|
el(CheckboxControl, {
|
|
onChange: function (isChecked) {
|
|
const updatedDisplayOptions = props.attributes.appointmentDisplay.map((item, idx) => {
|
|
if (idx === index) {
|
|
return { ...item, checked: isChecked ? true : false };
|
|
}
|
|
return item;
|
|
});
|
|
|
|
props.setAttributes({ appointmentDisplay: updatedDisplayOptions });
|
|
},
|
|
label: toggle.label,
|
|
checked: toggle.checked,
|
|
})
|
|
);
|
|
});
|
|
var toggleDisplayOptionsTwo = props.attributes.resourceOptions
|
|
.filter(toggle => toggle.label === 'Disable')
|
|
.map((toggle, index) => {
|
|
return el(
|
|
"div",
|
|
{ className: "ssa-checkboxes-input-container" },
|
|
el(CheckboxControl, {
|
|
onChange: function (isChecked) {
|
|
const updatedoptionsDisplays = props.attributes.resourceOptions.map((item, idx) => {
|
|
if (idx === index) {
|
|
return { ...item, checked: isChecked ? true : false };
|
|
}
|
|
return item;
|
|
});
|
|
|
|
props.setAttributes({ resourceOptions: updatedoptionsDisplays });
|
|
},
|
|
label: toggle.label,
|
|
checked: toggle.checked,
|
|
})
|
|
);
|
|
});
|
|
|
|
if(props.attributes.type){
|
|
let type = props.attributes.type;
|
|
props.setAttributes({ selectedResourceTypes : [type] });
|
|
props.setAttributes({ type : '' } );
|
|
}
|
|
|
|
var rssTypeOptions = {};
|
|
Object.keys(ssaResources.types).forEach(function (key) {
|
|
rssTypeOptions[key] = ssaResources.types[key]
|
|
});
|
|
var disableResourceOption = props.attributes.resourceOptions.some(option => option.checked);
|
|
|
|
if (!disableResourceOption) {
|
|
var toggleDisplayAllResourceType = props.attributes.allResourcesTypeOption
|
|
.filter(toggle => toggle.label === 'All')
|
|
.map((toggle, index) => {
|
|
return el(
|
|
"div",
|
|
{ className: "ssa-checkboxes-input-container" },
|
|
el(CheckboxControl, {
|
|
onChange: function (isChecked) {
|
|
const updatedOptionsDisplays = props.attributes.allResourcesTypeOption.map((item, idx) => {
|
|
if (idx === index) {
|
|
return { ...item, checked: isChecked ? true : false };
|
|
}
|
|
return item;
|
|
});
|
|
props.setAttributes({ allResourcesTypeOption: updatedOptionsDisplays });
|
|
},
|
|
label: toggle.label,
|
|
checked: toggle.checked,
|
|
}),
|
|
(props.attributes.selectedResourceTypes.length) ?
|
|
el(Button, {
|
|
isSecondary: true,
|
|
className: "ssa-block-booking-uncheck-all",
|
|
onClick: function () {
|
|
props.setAttributes({
|
|
selectedResourceTypes: [],
|
|
});
|
|
}
|
|
}, 'Uncheck All') :
|
|
null,
|
|
);
|
|
});
|
|
}
|
|
|
|
|
|
function onCheckChange(id, isChecked) {
|
|
const currentTypes = props.attributes.selectedResourceTypes;
|
|
|
|
if (isChecked && !currentTypes.includes(id)) {
|
|
const updatedTypes = [...currentTypes, id];
|
|
props.setAttributes({ selectedResourceTypes: updatedTypes });
|
|
} else if (!isChecked && currentTypes.includes(id)) {
|
|
const updatedTypes = currentTypes.filter(type => type !== id);
|
|
props.setAttributes({ selectedResourceTypes: updatedTypes });
|
|
}
|
|
}
|
|
|
|
var allResourceOption = props.attributes.allResourcesTypeOption.some(option => option.checked);
|
|
|
|
var apptTypeCheckboxes;
|
|
|
|
if (!disableResourceOption) {
|
|
if (!allResourceOption) {
|
|
apptTypeCheckboxes = Object.keys(rssTypeOptions).map(function (key) {
|
|
return el(
|
|
"div",
|
|
{ className: "ssa-toggle-input-container" },
|
|
el(CheckboxControl, {
|
|
onChange: onCheckChange.bind(null, key),
|
|
label: rssTypeOptions[key],
|
|
checked: props.attributes.selectedResourceTypes.includes(key),
|
|
id: `checkbox_${key}`
|
|
}),
|
|
)
|
|
});
|
|
}
|
|
}
|
|
|
|
let showTeamMemberBlock = null;
|
|
if (true == staff.enabled){
|
|
showTeamMemberBlock = el(
|
|
PanelBody,
|
|
{
|
|
title: __('Display Team Member Information', 'simply-schedule-appointments'),
|
|
initialOpen: false,
|
|
},
|
|
el('div', { className: 'panel-content' }, toggleElements),
|
|
);
|
|
}
|
|
|
|
let showResourcesBlock = null;
|
|
if (ssaResources.enabled && Object.keys(ssaResources.types).length > 0){
|
|
showResourcesBlock = el(
|
|
PanelBody,
|
|
{
|
|
title: __('Display Resources', 'simply-schedule-appointments'),
|
|
initialOpen: false,
|
|
},
|
|
el('div', { className: 'panel-content' }, toggleDisplayOptionsTwo,toggleDisplayAllResourceType, apptTypeCheckboxes),
|
|
);
|
|
}
|
|
|
|
return [
|
|
el(ServerSideRender, {
|
|
block: "ssa/upcoming-appointments",
|
|
attributes: props.attributes,
|
|
},
|
|
el("div", {
|
|
className: "ssa-block-handler",
|
|
})
|
|
),
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(TextControl, {
|
|
label:
|
|
__('Message to display if customer has no upcoming appointments', 'simply-schedule-appointments'),
|
|
value: props.attributes.no_results_message,
|
|
onChange: (value) => {
|
|
props.setAttributes({ no_results_message: value });
|
|
},
|
|
onBlur: () => {
|
|
if (!props.attributes.no_results_message) {
|
|
props.setAttributes({ no_results_message: 'No upcoming appointments' });
|
|
}
|
|
},
|
|
className: "message-box"
|
|
}),
|
|
el(
|
|
PanelBody,
|
|
{ title: __('Display Information', 'simply-schedule-appointments'), initialOpen: false },
|
|
el('div', null, toggledisplayOptions)
|
|
),
|
|
showBlock && showResourcesBlock,
|
|
showBlock && showTeamMemberBlock,
|
|
),
|
|
];
|
|
},
|
|
|
|
save: function () {
|
|
return null;
|
|
},
|
|
});
|