@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.7 → 1.0.4-beta.0

package/src/actions/wizardActions.js

@@ -1,12 +1,12 @@
 import {
-  selectFormTitle,
-  selectFormIcon,
-  selectFormDisplayName,
-  selectFormLayout,
-  selectFormFields,
+	selectFormTitle,
+	selectFormIcon,
+	selectFormDisplayName,
+	selectFormLayout,
+	selectFormFields,
 } from "../selectors/featureBuilderSelectors";
 
-import { clearFormSubmissionState } from "./formActions"
+import { clearFormSubmissionState } from "./formActions";
 
 import { values } from "../values.config";
 
@@ -21,208 +21,208 @@ export const VALIDATE_AND_UPDATE_STEP = `${REDUCER_PREFIX}_VALIDATE_AND_UPDATE_S
 
 // Mode setters
 export const setWizardMode = (mode) => ({
-  type: SET_WIZARD_MODE,
-  payload: mode,
+	type: SET_WIZARD_MODE,
+	payload: mode,
 });
 
 // Navigation actions
 export const setNavigationState = (navigationState) => ({
-  type: SET_NAVIGATION_STATE,
-  payload: navigationState,
+	type: SET_NAVIGATION_STATE,
+	payload: navigationState,
 });
 
 export const setCurrentStep = (step, previousStep = null) => ({
-  type: SET_NAVIGATION_STATE,
-  payload: {
-    currentStep: step,
-    previousStep,
-    canGoBack: step !== "welcome",
-    canGoForward: true,
-  },
+	type: SET_NAVIGATION_STATE,
+	payload: {
+		currentStep: step,
+		previousStep,
+		canGoBack: step !== "welcome",
+		canGoForward: true,
+	},
 });
 
 export const goToStep = (step) => (dispatch, getState) => {
-  const state = getState()[values.reducerKey];
-  const currentStep = state?.wizard?.navigation?.currentStep;
+	const state = getState()[values.reducerKey];
+	const currentStep = state?.wizard?.navigation?.currentStep;
 
-  // Clear form submission state when changing steps
-  dispatch(clearFormSubmissionState());
+	// Clear form submission state when changing steps
+	dispatch(clearFormSubmissionState());
 
-  dispatch(setCurrentStep(step, currentStep));
+	dispatch(setCurrentStep(step, currentStep));
 };
 
 export const updateStepValidation = (step, isValid, errors = {}) => ({
-  type: UPDATE_STEP_VALIDATION,
-  payload: {
-    step,
-    isValid,
-    errors,
-  },
+	type: UPDATE_STEP_VALIDATION,
+	payload: {
+		step,
+		isValid,
+		errors,
+	},
 });
 
 export const validateAndUpdateStep = (step) => (dispatch, getState) => {
-  // Use existing selectors to get form data
-  const state = getState();
-  const title = selectFormTitle(state);
-  const icon = selectFormIcon(state);
-  const displayName = selectFormDisplayName(state);
-  const layout = selectFormLayout(state);
-  const fields = selectFormFields(state);
+	// Use existing selectors to get form data
+	const state = getState();
+	const title = selectFormTitle(state);
+	const icon = selectFormIcon(state);
+	const displayName = selectFormDisplayName(state);
+	const layout = selectFormLayout(state);
+	const fields = selectFormFields(state);
 
-  const form = { title, icon, displayName, layout, fields };
+	const form = { title, icon, displayName, layout, fields };
 
-  const { isValid, errors } = getFormValidation(form, step);
+	const { isValid, errors } = getFormValidation(form, step);
 
-  dispatch(updateStepValidation(step, isValid, errors));
+	dispatch(updateStepValidation(step, isValid, errors));
 
-  // If valid, mark as complete
-  if (isValid) {
-    dispatch({
-      type: MARK_STEP_COMPLETE,
-      payload: step,
-    });
-  }
+	// If valid, mark as complete
+	if (isValid) {
+		dispatch({
+			type: MARK_STEP_COMPLETE,
+			payload: step,
+		});
+	}
 
-  return { isValid, errors };
+	return { isValid, errors };
 };
 
 // Step completion
 export const markStepComplete = (step) => ({
-  type: MARK_STEP_COMPLETE,
-  payload: step,
+	type: MARK_STEP_COMPLETE,
+	payload: step,
 });
 
 // Reset wizard state
 export const resetWizardState = () => ({
-  type: RESET_WIZARD_STATE,
+	type: RESET_WIZARD_STATE,
 });
 
 const getFormValidation = (form, step) => {
-  // Return validation results for undefined form (prevent crashes)
-  if (!form) {
-    switch (step) {
-      case "overview":
-        return {
-          isValid: false,
-          errors: {
-            title: "Title is required",
-            displayName: "Display name is required",
-            icon: "Icon is required",
-          },
-        };
-      case "fields":
-        return {
-          isValid: false,
-          errors: {
-            missingTitle: "Title field is required",
-            missingImage: "Feature image field is required",
-            fieldLabels: "Some fields are missing labels",
-          },
-        };
-      case "layout":
-        return {
-          isValid: false,
-          errors: {
-            layoutType: "Layout type is required",
-          },
-        };
-      default:
-        return { isValid: false, errors: {} };
-    }
-  }
-
-  switch (step) {
-    case "overview": {
-      const hasTitle = form.title?.trim().length > 0;
-      const hasDisplayName = form.displayName?.trim().length > 0;
-      const hasIcon = form.icon?.length > 0;
-
-      return {
-        isValid: hasTitle && hasDisplayName && hasIcon,
-        errors: {
-          title: !hasTitle ? "Title is required" : null,
-          displayName: !hasDisplayName ? "Display name is required" : null,
-          icon: !hasIcon ? "Icon is required" : null,
-        },
-      };
-    }
-    case "fields": {
-      const hasTitleField = form.fields?.some(
-        (field) => field.id === "mandatory-title",
-      );
-      const hasImageField = form.fields?.some(
-        (field) => field.id === "mandatory-feature-image",
-      );
-
-      // Check each field for missing labels and create field-specific errors
-      const fieldErrors = {};
-      let allFieldsHaveLabels = true;
-
-      if (form.fields) {
-        form.fields.forEach((field) => {
-          if (
-            (field.type === "text" ||
-              field.type === "description" ||
-              field.type === "title" ||
-              field.type === "image" ||
-              field.type === "gallery" ||
-              field.type === "feature-image" ||
-              field.type === "file" ||
-              field.type === "cta") &&
-            field.values
-          ) {
-            if (!field.values.label || field.values.label.trim().length === 0) {
-              fieldErrors[field.id] = "Field label is required";
-              allFieldsHaveLabels = false;
-            }
-          }
-        });
-      }
-
-      return {
-        isValid: hasTitleField && hasImageField && allFieldsHaveLabels,
-        errors: {
-          missingTitle: !hasTitleField ? "Title field is required" : null,
-          missingImage: !hasImageField
-            ? "Feature image field is required"
-            : null,
-          ...fieldErrors,
-        },
-      };
-    }
-    case "layout": {
-      const hasLayoutType = form.layout?.type?.length > 0;
-      return {
-        isValid: hasLayoutType,
-        errors: {
-          layoutType: !hasLayoutType ? "Layout type is required" : null,
-        },
-      };
-    }
-    default:
-      return { isValid: true, errors: {} };
-  }
+	// Return validation results for undefined form (prevent crashes)
+	if (!form) {
+		switch (step) {
+			case "overview":
+				return {
+					isValid: false,
+					errors: {
+						title: "Title is required",
+						displayName: "Display name is required",
+						icon: "Icon is required",
+					},
+				};
+			case "fields":
+				return {
+					isValid: false,
+					errors: {
+						missingTitle: "Title field is required",
+						missingImage: "Feature image field is required",
+						fieldLabels: "Some fields are missing labels",
+					},
+				};
+			case "layout":
+				return {
+					isValid: false,
+					errors: {
+						layoutType: "Layout type is required",
+					},
+				};
+			default:
+				return { isValid: false, errors: {} };
+		}
+	}
+
+	switch (step) {
+		case "overview": {
+			const hasTitle = form.title?.trim().length > 0;
+			const hasDisplayName = form.displayName?.trim().length > 0;
+			const hasIcon = form.icon?.length > 0;
+
+			return {
+				isValid: hasTitle && hasDisplayName && hasIcon,
+				errors: {
+					title: !hasTitle ? "Title is required" : null,
+					displayName: !hasDisplayName ? "Display name is required" : null,
+					icon: !hasIcon ? "Icon is required" : null,
+				},
+			};
+		}
+		case "fields": {
+			const hasTitleField = form.fields?.some(
+				(field) => field.id === "mandatory-title",
+			);
+			const hasImageField = form.fields?.some(
+				(field) => field.id === "mandatory-feature-image",
+			);
+
+			// Check each field for missing labels and create field-specific errors
+			const fieldErrors = {};
+			let allFieldsHaveLabels = true;
+
+			if (form.fields) {
+				form.fields.forEach((field) => {
+					if (
+						(field.type === "text" ||
+							field.type === "description" ||
+							field.type === "title" ||
+							field.type === "image" ||
+							field.type === "gallery" ||
+							field.type === "feature-image" ||
+							field.type === "file" ||
+							field.type === "cta") &&
+						field.values
+					) {
+						if (!field.values.label || field.values.label.trim().length === 0) {
+							fieldErrors[field.id] = "Field label is required";
+							allFieldsHaveLabels = false;
+						}
+					}
+				});
+			}
+
+			return {
+				isValid: hasTitleField && hasImageField && allFieldsHaveLabels,
+				errors: {
+					missingTitle: !hasTitleField ? "Title field is required" : null,
+					missingImage: !hasImageField
+						? "Feature image field is required"
+						: null,
+					...fieldErrors,
+				},
+			};
+		}
+		case "layout": {
+			const hasLayoutType = form.layout?.type?.length > 0;
+			return {
+				isValid: hasLayoutType,
+				errors: {
+					layoutType: !hasLayoutType ? "Layout type is required" : null,
+				},
+			};
+		}
+		default:
+			return { isValid: true, errors: {} };
+	}
 };
 
 export const setWizardModeAndSave = (mode) => (dispatch) => {
-  dispatch(setWizardMode(mode));
+	dispatch(setWizardMode(mode));
 };
 
 export const setCurrentStepAndSave =
-  (step, previousStep = null) =>
-    (dispatch) => {
-      dispatch(setCurrentStep(step, previousStep));
-    };
+	(step, previousStep = null) =>
+	(dispatch) => {
+		dispatch(setCurrentStep(step, previousStep));
+	};
 
 export const updateStepValidationAndSave =
-  (step, isValid, errors = {}) =>
-    (dispatch) => {
-      dispatch(updateStepValidation(step, isValid, errors));
-      if (isValid) {
-        dispatch(markStepComplete(step));
-      }
-    };
+	(step, isValid, errors = {}) =>
+	(dispatch) => {
+		dispatch(updateStepValidation(step, isValid, errors));
+		if (isValid) {
+			dispatch(markStepComplete(step));
+		}
+	};
 
 export const markStepCompleteAndSave = (step) => (dispatch) => {
-  dispatch(markStepComplete(step));
+	dispatch(markStepComplete(step));
 };

package/src/components/BaseFieldConfig.jsx

@@ -241,10 +241,10 @@ export const BaseFieldConfig = (props) => {
 						{setMaxImages && (
 							<GenericInput
 								type="number"
-								value={maxImages || 10}
-								placeholder="10"
+								value={maxImages || 16}
+								placeholder="16"
 								label="Maximum Images"
-								onChange={(e) => setMaxImages(parseInt(e.target.value) || 10)}
+								onChange={(e) => setMaxImages(parseInt(e.target.value) || 16)}
 								className={styles.fieldSpacing}
 								alwaysShowLabel
 							/>

package/src/components/ListingEditor.jsx

@@ -168,8 +168,8 @@ const ListingEditor = ({ mode = "create", listingId, onSuccess, onCancel }) => {
 
 		// formData always has structure { fields: {...} } after our fixes
 		const submissionData = isEditMode
-			? { id: listingId, fields: formData.fields }
-			: { fields: formData.fields };
+			? { id: listingId, fields: formData.fields, site: auth.site }
+			: { fields: formData.fields, site: auth.site };
 
 		const actionPromise = dispatch(
 			isEditMode ? editListing(submissionData) : createListing(submissionData),

package/src/components/SidebarLayout.jsx

@@ -84,7 +84,7 @@ const SideBarInner = (props) => {
 
 	// Build sidebar items based on mode
 	const buildSidebarItems = () => {
-		const isWizardMode = mode === "create" || mode === "edit";
+		const isWizardMode = mode === "create";
 
 		return steps.map((step, index) => {
 			const isCompleted = selectIsStepComplete(step.key);
@@ -109,8 +109,8 @@ const SideBarInner = (props) => {
 				isFontAwesome: true,
 				// Enhanced completion indicator
 				completed: isCompleted,
-				// Disable all navigation in wizard mode
-				disabled: isWizardMode || (mode === "create" && !isAccessible),
+				// Disable all navigation in create mode, otherwise respect accessibility
+				disabled: mode === "create" || !isAccessible,
 			};
 
 			return itemProps;
@@ -137,7 +137,7 @@ const SideBarInner = (props) => {
 
 	// Add effect to manually attach click handlers since HubSidebar might not use onclick properly
 	useEffect(() => {
-		const isWizardMode = mode === "create" || mode === "edit";
+		const isWizardMode = mode === "create";
 
 		const attachClickHandlers = () => {
 			const stepsWithUrls = [