@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.8 → 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/listing/ListingFileInput.module.css

@@ -48,7 +48,7 @@
 
 .fileListItem__icon {
 	color: var(--text-bluegrey);
-		font-size: 2rem;
+	font-size: 2rem;
 	flex-shrink: 0;
 	text-align: center;
 }

package/src/components/listing/ListingGalleryInput.module.css

@@ -3,7 +3,7 @@
 /* Gallery container styles */
 .galleryContainer {
 	margin-top: 0.75rem;
-		max-width:200px;
+	max-width: 200px;
 }
 
 /* Error border wrapper */
@@ -21,7 +21,7 @@
 
 .imageGrid {
 	display: grid;
-  grid-template-columns: repeat(4, 160px);
+	grid-template-columns: repeat(4, 160px);
 	gap: 1rem;
 	margin-top: 0.5rem;
 }

package/src/reducers/featureBuilderReducer.js

@@ -277,8 +277,11 @@ const formReducer = (state = INITIAL_FORM_STATE, action) => {
 	switch (type) {
 		case formActionTypes.SET_INITIAL_VALUES: {
 			// The actual definition data is in payload.featureDefinition.definition
-			const definitionWrapper = (payload && payload.featureDefinition) || payload;
-			const definition = (definitionWrapper && definitionWrapper.definition) || definitionWrapper;
+			const definitionWrapper =
+				(payload && payload.featureDefinition) || payload;
+			const definition =
+				(definitionWrapper && definitionWrapper.definition) ||
+				definitionWrapper;
 
 			// Validate and map definition data to form state structure
 			const mappedValues = {
@@ -513,8 +516,11 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 				const featureDefinitionWrapper =
 					(data && data.featureDefinition) || data;
 				definition =
-					(featureDefinitionWrapper && featureDefinitionWrapper.definition) || featureDefinitionWrapper;
-				definitionId = (featureDefinitionWrapper && featureDefinitionWrapper.id) || values.featureId;
+					(featureDefinitionWrapper && featureDefinitionWrapper.definition) ||
+					featureDefinitionWrapper;
+				definitionId =
+					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
+					values.featureId;
 
 				// Ensure fields array exists and preserves order property
 				if (definition?.fields) {