/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import {
InnerBlocks,
store as blockEditorStore,
} from "@wordpress/block-editor";
import { Button } from "@wordpress/components";
import isEqual from "lodash/isEqual";
import {
useEffect,
useState,
useRef,
useCallback,
memo,
} from "@wordpress/element";
import { select, dispatch, useDispatch, subscribe, useSelect } from "@wordpress/data";
import { applyFilters } from "@wordpress/hooks";
import { createBlocksFromInnerBlocksTemplate, createBlock } from "@wordpress/blocks";
/**
* Internal dependencies
*/
import { getValidationRules, getFormFields } from "./helpers";
import {
fetchFormBlockData,
saveFormBlockData,
DynamicInputValueHandler,
getAllBlockClientIds,
EBDisplayIcon,
BlockProps,
withBlockContext,
} from "@essential-blocks/controls";
import {
CONTACT_FORM_TEMPLATE_1,
CONTACT_FORM_TEMPLATE_2,
} from "./templates/contact-form";
import {
SUBSCRIPTION_FORM_TEMPLATE_1,
SUBSCRIPTION_FORM_TEMPLATE_2,
} from "./templates/subscription-form";
import { RSVP_FORM_TEMPLATE } from "./templates/rsvp-form";
import Inspector from "./inspector";
import ContactFormIcon from "./icons/contact.svg";
import SubscriptionFormIcon from "./icons/subscription.svg";
import RSVPFormIcon from "./icons/rsvp.svg";
import BlankIcon from "./icons/blank.svg";
import defaultAttributes from "./attributes";
import Style from "./style";
import loader from "../../../assets/images/loading.gif";
const Edit = (props) => {
const { attributes, setAttributes, clientId, isSelected } = props;
const {
resOption,
cover,
blockId,
classHook,
formId,
notificationType,
formTitle,
formType,
template,
integrations,
buttonText,
btnAddIcon,
icon,
iconPosition,
formLayout,
showLabel,
showInputIcon,
successMessage,
errorMessage,
validationErrorMessage,
formStyle,
multistepdata,
stepIndecator,
enableMultistepForm,
enableStepCount,
enableStepIcon,
enableStepSubtitle,
nextBtnText,
prevBtnText,
} = attributes;
const [formSettings, setFormSettings] = useState({});
const [allFields, setAllFields] = useState({});
const [isTemplateLoading, setIsTemplateLoading] = useState(false);
const { replaceInnerBlocks } = useDispatch(blockEditorStore);
const showLabelRef = useRef(showLabel);
const showIconRef = useRef(showInputIcon);
const formStyleRef = useRef(formStyle);
const formTypeRef = useRef(formType);
const templateRef = useRef(template);
const allowedBlocks = applyFilters("eb-form-block-allowed-blocks", [
"essential-blocks/form-text-field",
"essential-blocks/form-textarea-field",
"essential-blocks/form-email-field",
"essential-blocks/form-number-field",
"essential-blocks/form-select-field",
"essential-blocks/form-checkbox-field",
"essential-blocks/form-radio-field",
"essential-blocks/advanced-heading",
"essential-blocks/advanced-image",
"essential-blocks/row",
"core/image",
"core/heading",
"core/paragraph",
]);
const BLOCK_PREFIX = "eb-form";
// you must declare this variable
const enhancedProps = {
...props,
blockPrefix: BLOCK_PREFIX,
style: <Style {...props} />,
};
const formInnerItem =
select("core/block-editor").getBlock(clientId)?.innerBlocks;
const innerBlocksRef = useRef(formInnerItem);
// Set all fields when changes inner blocks
useEffect(() => {
const allBlocks = getAllBlockClientIds();
if (allBlocks.includes(clientId)) {
const blockObj = select("core/block-editor").getBlock(clientId);
const fields = getFormFields(blockObj);
setAllFields(fields);
}
}, [formInnerItem]);
useEffect(() => {
//Generate Custom Form ID
let uniqueId = clientId.substr(clientId.length - 6);
if (blockId && blockId.startsWith(BLOCK_PREFIX)) {
uniqueId = blockId.replace(BLOCK_PREFIX + "-", "");
}
if (!formId || formId.length === 0) {
setAttributes({ formId: `ebf-${uniqueId}` });
}
if (multistepdata.length === 0) {
const multistepDataInit =
innerBlocksRef?.current?.length > 0
? innerBlocksRef.current.filter(
(item) =>
item.name ===
"essential-blocks/pro-form-multistep-wrapper",
)
: [];
setAttributes({ multistepdata: multistepDataInit });
}
//Get formdata from Database
const fetchData = async () => {
return await fetchFormBlockData(blockId, "form_options");
};
fetchData().then((res) => {
const response = res?.form_options;
if (
!response ||
(typeof response === "object" &&
Object.keys(response).length === 0)
) {
setFormSettings({
mailTo: "",
replyTo: "",
mailCc: "",
mailBcc: "",
mailSubject: "",
});
} else {
setFormSettings(response);
if (response.notification) {
setAttributes({ notificationType: response.notification });
}
}
});
}, []);
useEffect(() => {
if (innerBlocksRef?.current?.length === formInnerItem?.length) {
if (!isEqual(innerBlocksRef.current, formInnerItem)) {
innerBlocksRef.current = formInnerItem;
const newMultistepData = innerBlocksRef.current.filter(
(item) =>
item.name ===
"essential-blocks/pro-form-multistep-wrapper",
);
setAttributes({ multistepdata: newMultistepData });
} else {
return;
}
}
// add
if (
innerBlocksRef.current == undefined ||
formInnerItem.length > innerBlocksRef.current.length
) {
innerBlocksRef.current = formInnerItem;
const newMultistepData = innerBlocksRef.current.filter(
(item) =>
item.name === "essential-blocks/pro-form-multistep-wrapper",
);
setAttributes({ multistepdata: newMultistepData });
}
// remove
if (formInnerItem.length < innerBlocksRef.current.length) {
const difference = innerBlocksRef.current.filter(
(item1) =>
!formInnerItem.some(
(item2) =>
item2.attributes.blockId ===
item1.attributes.blockId,
),
);
// Filtering only "essential-blocks/pro-form-multistep-wrapper" items
const filteredDifference = difference.filter(
(item) =>
item.name === "essential-blocks/pro-form-multistep-wrapper",
);
if (filteredDifference.length === 1) {
const removeditemId = difference[0]?.attributes?.blockId;
const updateditem = multistepdata.filter(
(item) => item.attributes?.blockId !== removeditemId,
);
setAttributes({
multistepdata: updateditem,
});
}
innerBlocksRef.current = formInnerItem;
}
}, [formInnerItem]);
const updateRecursiveAttributes = (blocks, attributes) => {
if (typeof blocks !== "object" || typeof attributes !== "object") {
return [];
}
// let parentId = false;
if (blocks.length > 0 && Object.keys(attributes).length > 0) {
for (const block of blocks) {
if (block.attributes && typeof block.attributes === "object") {
block.attributes = {
...block.attributes,
...attributes,
};
}
if (block.innerBlocks) {
updateRecursiveAttributes(block.innerBlocks, attributes);
}
}
}
};
//useEffect for Update innerblocks attribute values
useEffect(() => {
if (
showLabel !== showLabelRef.current ||
showInputIcon !== showIconRef.current ||
formStyle !== formStyleRef.current
) {
showLabelRef.current = showLabel;
showIconRef.current = showInputIcon;
formStyleRef.current = formStyle;
const formInnerBlocks =
select("core/block-editor").getBlock(clientId).innerBlocks;
updateRecursiveAttributes(formInnerBlocks, {
showLabel: showLabel,
isIcon: showInputIcon,
formStyle: formStyle,
});
//Replace Innerblocks with updated attributes
replaceInnerBlocks(clientId, formInnerBlocks);
}
}, [showLabel, showInputIcon, formStyle]);
// On change formStyle
useEffect(() => {
if ("Desktop" !== resOption) {
return;
}
if (formStyle === "form-style-modern") {
const formWrapper = document.querySelector(`.${blockId}`);
if (formWrapper) {
const inputs =
formWrapper.getElementsByClassName("eb-field-input");
for (let input of inputs) {
if (input.value) {
input.nextSibling?.classList.add("active");
}
input.addEventListener("focus", function (e) {
if (!input.nextSibling?.classList.contains("active")) {
input.nextSibling?.classList.add("active");
}
});
// Remove the class when the input loses focus
input.addEventListener("blur", function () {
if (!input.value) {
input.nextSibling?.classList.remove("active");
}
});
}
}
}
}, [formStyle]);
//On change "formType", change Template
useEffect(() => {
if (
formTypeRef.current === formType &&
templateRef.current === template
) {
return;
}
// Set loading state to true when template change starts
setIsTemplateLoading(true);
formTypeRef.current = formType;
templateRef.current = template;
// Set loading state to false after a short delay to ensure template is rendered
setTimeout(() => {
// Apply filter for form type selection
applyFilters("eb_form_type_selected", null, attributes, setAttributes);
if (formType === "contact_form") {
if (!formTitle) {
setAttributes({ formTitle: "Contact Form" });
}
if (template === "contact_form_1") {
replaceInnerBlocks(
clientId,
createBlocksFromInnerBlocksTemplate(
CONTACT_FORM_TEMPLATE_1,
),
);
setAttributes({
showInputIcon: true,
});
} else if (template === "contact_form_2") {
replaceInnerBlocks(
clientId,
createBlocksFromInnerBlocksTemplate(
CONTACT_FORM_TEMPLATE_2,
),
);
}
} else if (formType === "subscription_form") {
if (!formTitle) {
setAttributes({ formTitle: "Subscription Form" });
}
if (template === "subscription_form_1") {
replaceInnerBlocks(
clientId,
createBlocksFromInnerBlocksTemplate(
SUBSCRIPTION_FORM_TEMPLATE_1,
),
);
setAttributes({
showInputIcon: false,
});
} else if (template === "subscription_form_2") {
replaceInnerBlocks(
clientId,
createBlocksFromInnerBlocksTemplate(
SUBSCRIPTION_FORM_TEMPLATE_2,
),
);
}
} else if (formType === "rsvp_form") {
if (!formTitle) {
setAttributes({ formTitle: "RSVP Form" });
}
replaceInnerBlocks(
clientId,
createBlocksFromInnerBlocksTemplate(RSVP_FORM_TEMPLATE),
);
setAttributes({
showInputIcon: false,
});
} else if (formType === "blank") {
if (!formTitle) {
setAttributes({ formTitle: "New Form" });
}
replaceInnerBlocks(clientId, []);
setAttributes({
showInputIcon: false,
});
}
setIsTemplateLoading(false);
}, 50);
}, [formType, template]);
//set "isEditedPostPublishable" true when formSettings is changed
useEffect(() => {
const isEditedPostPublishable =
select("core/editor").isEditedPostPublishable();
if (
typeof isEditedPostPublishable !== "undefined" &&
isEditedPostPublishable === false
) {
dispatch("core/editor").editPost({ isPublishable: true });
}
}, [formSettings]);
/**
* Memorize function for hanlde endless render
*/
const formSettingsSave = useCallback(() => {
const isSavingPost = select("core/editor").isSavingPost();
const isAutosavingPost = select("core/editor").isAutosavingPost();
const isSavingTemplate = select("core/editor").isSavingNonPostEntityChanges();
/**
* Action
*/
if ((isSavingPost && !isAutosavingPost) || isSavingTemplate) {
const allBlocks = getAllBlockClientIds();
if (
allBlocks.includes(clientId) &&
typeof formSettings === "object" &&
Object.keys(formSettings).length > 0
) {
const blockObj = select("core/block-editor").getBlock(clientId);
const rules = getValidationRules(blockObj);
const fields = getFormFields(blockObj);
// const conditionalLogics = getConditionalLogics(blockObj);
let otherSettings = {
validationRules: { ...rules },
messages: {
success: successMessage,
error: errorMessage,
validationError: validationErrorMessage,
},
// conditionalLogics: conditionalLogics,
};
if (Object.keys(integrations).length > 0) {
otherSettings.integrations = integrations;
}
// Apply filter to otherSettings
otherSettings = applyFilters(
'eb_form_other_settings',
otherSettings,
{
blockId,
formTitle,
blockObj,
fields
}
);
const updatedFormSettings = {
...formSettings,
notification: notificationType,
};
const save = saveFormBlockData(
blockId,
formTitle || "Form ID: " + blockId,
fields,
updatedFormSettings,
otherSettings,
);
// console.log('Free save called with:', save, otherSettings);
//Display snackbar disable for now, will add later after fix multi render
// save.then((res) => {
// //Show notice
// dispatch("core/notices").createNotice(
// res?.success ? "success" : "error",
// res.data || '',
// {
// type: "snackbar",
// isDismissible: true,
// }
// );
// })
}
}
}, [
blockId,
formTitle,
notificationType,
formSettings,
successMessage,
errorMessage,
validationErrorMessage,
integrations,
]);
// subscribe
// let unsubscribe = subscribe(formSettingsSave);
const useFormSettingsSave = (deps) => {
const wasSavingRef = useRef(false);
useEffect(() => {
const unsubscribe = subscribe(() => {
const isSavingPost = select("core/editor").isSavingPost();
const isAutosavingPost =
select("core/editor").isAutosavingPost();
const isSavingTemplate =
select("core/editor").isSavingNonPostEntityChanges();
const isRealSaving =
(isSavingPost && !isAutosavingPost) || isSavingTemplate;
// Detect the transition: not saving -> saving
if (isRealSaving && !wasSavingRef.current) {
wasSavingRef.current = true;
// Call your save logic
formSettingsSave();
} else if (!isRealSaving) {
// Reset the ref when not saving anymore
wasSavingRef.current = false;
}
});
return () => {
unsubscribe();
};
}, [formSettingsSave]);
};
useFormSettingsSave();
// Add new multistep wrapper
const addMultistepWrapper = (event) => {
// Stop event propagation to prevent selection issues
if (event) {
event.preventDefault();
event.stopPropagation();
}
// Always get the latest blocks before adding a new one
const currentBlocks = select("core/block-editor").getBlocks(clientId);
// Create a new multistep wrapper block
const newBlock = createBlock("essential-blocks/pro-form-multistep-wrapper", {
stepName: `Step ${currentBlocks.filter(block =>
block.name === "essential-blocks/pro-form-multistep-wrapper"
).length + 1}`,
enableStepIcon: enableStepIcon,
enableSubtitle: enableStepSubtitle,
stepIcon: "fas fa-check"
});
// Store the clientId of the new block
const newBlockClientId = newBlock.clientId;
// Create a new array with all current blocks plus the new one
const updatedBlocks = [...currentBlocks, newBlock];
// Replace the inner blocks with the updated array
dispatch("core/block-editor").replaceInnerBlocks(clientId, updatedBlocks);
// Force focus back to the parent form block to ensure the button remains clickable
dispatch("core/block-editor").selectBlock(clientId);
// Then select the new block with a slight delay
setTimeout(() => {
dispatch("core/block-editor").selectBlock(newBlockClientId);
// Update the multistepdata attribute
const updatedMultistepData = updatedBlocks.filter(
block => block.name === "essential-blocks/pro-form-multistep-wrapper"
);
setAttributes({ multistepdata: updatedMultistepData });
// Force focus back to the parent form block after a short delay
// This ensures the "Add a New Step" button remains clickable for subsequent clicks
setTimeout(() => {
dispatch("core/block-editor").selectBlock(clientId);
}, 100);
}, 50);
};
// Subscribe to block removals to update multistepdata in real-time
useEffect(() => {
// Skip if no multistep wrappers exist
if (!multistepdata || multistepdata.length === 0) return;
// Store the current multistep wrapper clientIds for comparison
const multistepClientIds = multistepdata.map(step => step.clientId);
// Create subscription to detect block removals
const unsubscribe = subscribe(() => {
// Skip if the form block itself is removed
if (!select("core/block-editor").getBlock(clientId)) return;
// Get current inner blocks
const currentInnerBlocks = select("core/block-editor").getBlocks(clientId);
// Get current multistep wrapper blocks
const currentMultistepBlocks = currentInnerBlocks.filter(
block => block.name === "essential-blocks/pro-form-multistep-wrapper"
);
// Get current multistep wrapper clientIds
const currentMultistepClientIds = currentMultistepBlocks.map(block => block.clientId);
// Check if any multistep wrapper has been removed
const hasRemovedStep = multistepClientIds.some(
id => !currentMultistepClientIds.includes(id)
);
// If a step was removed, select the parent form block
if (hasRemovedStep && currentMultistepBlocks.length < multistepdata.length) {
// Select the parent form block to trigger the useEffect that updates multistepdata
dispatch("core/block-editor").selectBlock(clientId);
}
});
// Clean up subscription on unmount
return () => unsubscribe();
}, [multistepdata]);
return cover.length ? (
<div>
<img src={cover} alt="data table" style={{ maxWidth: "100%" }} />
</div>
) : (
<>
{isSelected && (
<Inspector
clientId={clientId}
attributes={attributes}
setAttributes={setAttributes}
formSettings={formSettings}
setFormSettings={setFormSettings}
allFormFields={allFields}
/>
)}
<BlockProps.Edit {...enhancedProps}>
{EssentialBlocksLocalize?.unfilter_capability &&
EssentialBlocksLocalize.unfilter_capability === "false" && (
<div
style={{ marginLeft: "0", marginRight: "0" }}
className="notice notice-error"
>
<p>
You don't have permission to add/edit the Form
Block. Any changes you make won't work in the
frontend properly.
</p>
</div>
)}
<div
className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}
>
<div id={blockId} className={`${blockId} eb-form-wrapper`}>
{!formType && (
<>
<div className="eb-form-editor-formtype-select">
<h2>Please Select a Form Type</h2>
<div
className="eb-form-editor-formtype-item"
onClick={() => {
setIsTemplateLoading(true)
setAttributes({
formType: "contact_form",
})
}}
>
<div className="eb-form-editor-formtype-icon">
<img
src={ContactFormIcon}
alt={"conact form icon"}
/>
</div>
<span>Contact Form</span>
</div>
<div
className="eb-form-editor-formtype-item"
onClick={() => {
setIsTemplateLoading(true)
setAttributes({
formType: "subscription_form",
})
}}
>
<div className="eb-form-editor-formtype-icon">
<img
src={SubscriptionFormIcon}
alt={"subscription form icon"}
/>
</div>
<span>Subscription Form</span>
</div>
<div
className="eb-form-editor-formtype-item"
onClick={() => {
setIsTemplateLoading(true)
setAttributes({
formType: "rsvp_form",
})
}}
>
<div className="eb-form-editor-formtype-icon">
<img
src={RSVPFormIcon}
alt={"rsvp form icon"}
/>
</div>
<span>RSVP Form</span>
</div>
{applyFilters(
"eb_pro_form_type_selector",
"",
attributes,
setAttributes,
setIsTemplateLoading
)}
<div
className="eb-form-editor-formtype-item"
onClick={() =>
setAttributes({ formType: "blank" })
}
>
<div className="eb-form-editor-formtype-icon">
<img
src={BlankIcon}
alt={"blank form icon"}
/>
</div>
<span>Blank</span>
</div>
</div>
</>
)}
{formType && formType.length > 0 && (
<>
{isTemplateLoading ? (
<div className="eb-form-template-loading">
<img src={loader} />
<p>Loading template...</p>
</div>
) : (
<>
{formInnerItem &&
formInnerItem.length === 0 && (
<div className="eb-popup-before-content">
<p>
<strong>Add Form {formType === "multistep_form" ? 'Step' : 'Field'}</strong>
</p>
</div>
)}
<form
id={formId}
className={`eb-form form-layout-${formLayout} ${formStyle} ${enableMultistepForm
? "eb-multistep-form"
: ""
}`}
action=""
>
{formType === "multistep_form" &&
enableMultistepForm &&
stepIndecator &&
multistepdata.length > 0 && (
<>
{applyFilters(
"eb_form_step_indicator_html",
"",
attributes,
)}
</>
)}
<div className={"eb-form-fields"}>
<InnerBlocks
template={[]}
renderAppender={
select(
"core/block-editor",
).getBlockOrder(clientId)
.length > 0
? undefined
: formType === "multistep_form" ? undefined : InnerBlocks.ButtonBlockAppender
}
allowedBlocks={formType === "multistep_form" ? ["essential-blocks/pro-form-multistep-wrapper"] : allowedBlocks}
/>
{/* Add Multistep Button - Only show if multistep form is enabled */}
{formType === "multistep_form" && enableMultistepForm && (
<Button
className="is-default eb-form-add-step-button"
label={__("Add a New Step", "essential-blocks")}
icon="plus-alt2"
onClick={(event) => addMultistepWrapper(event)}
>
<span className="eb-form-add-step-button-label">
{__("Add a New Step", "essential-blocks")}
</span>
</Button>
)}
</div>
{formInnerItem?.length > 0 && formType !== "multistep_form" && (
<div className={"eb-form-submit"}>
{applyFilters(
"eb_form_step_buttons_html",
"",
attributes,
)}
<button
data-id={blockId}
type="button"
className="btn btn-primary eb-form-submit-button"
>
{btnAddIcon &&
iconPosition === "left" ? (
<EBDisplayIcon
className={
"eb-button-icon"
}
icon={icon}
/>
) : (
""
)}
<DynamicInputValueHandler
value={buttonText}
onChange={(buttonText) =>
setAttributes({
buttonText,
})
}
readOnly={true}
/>
{btnAddIcon &&
iconPosition === "right" ? (
<EBDisplayIcon
className={
"eb-button-icon"
}
icon={icon}
/>
) : (
""
)}
</button>
</div>
)}
</form>
</>
)}
</>
)}
</div>
</div>
</BlockProps.Edit>
</>
);
};
export default memo(withBlockContext(defaultAttributes)(Edit));
