@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.4 → 1.0.2-beta.6

package/src/actions/wizardActions.js

@@ -1,243 +1,228 @@
-/**
- * Wizard Actions for Feature Builder
- * Manages wizard state including navigation, step validation, and mode switching
- * Provides validation logic for overview, fields, and layout steps
- * Coordinates with form state and step progression
- *
- * @namespace wizardActions
- */
-
-// Import selectors for form state access
 import {
-	selectFormTitle,
-	selectFormIcon,
-	selectFormDisplayName,
-	selectFormLayout,
-	selectFormFields,
+  selectFormTitle,
+  selectFormIcon,
+  selectFormDisplayName,
+  selectFormLayout,
+  selectFormFields,
 } from "../selectors/featureBuilderSelectors";
 
-// Import values config and form actions
+import { clearFormSubmissionState } from "./formActions"
+
 import { values } from "../values.config";
-import { clearFormSubmissionState } from "./formActions";
 
 // Wizard action types
-export const SET_WIZARD_MODE = "SET_WIZARD_MODE";
-export const SET_NAVIGATION_STATE = "SET_NAVIGATION_STATE";
-export const UPDATE_STEP_VALIDATION = "UPDATE_STEP_VALIDATION";
-export const MARK_STEP_COMPLETE = "MARK_STEP_COMPLETE";
-export const RESET_WIZARD_STATE = "RESET_WIZARD_STATE";
-export const VALIDATE_AND_UPDATE_STEP = "VALIDATE_AND_UPDATE_STEP";
+const REDUCER_PREFIX = values.reducerKey.toUpperCase();
+export const SET_WIZARD_MODE = `${REDUCER_PREFIX}_SET_WIZARD_MODE`;
+export const SET_NAVIGATION_STATE = `${REDUCER_PREFIX}_SET_NAVIGATION_STATE`;
+export const UPDATE_STEP_VALIDATION = `${REDUCER_PREFIX}_UPDATE_STEP_VALIDATION`;
+export const MARK_STEP_COMPLETE = `${REDUCER_PREFIX}_MARK_STEP_COMPLETE`;
+export const RESET_WIZARD_STATE = `${REDUCER_PREFIX}_RESET_WIZARD_STATE`;
+export const VALIDATE_AND_UPDATE_STEP = `${REDUCER_PREFIX}_VALIDATE_AND_UPDATE_STEP`;
 
 // 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 &&
-		state.wizard &&
-		state.wizard.navigation &&
-		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 && form.title.trim().length > 0;
-			const hasDisplayName =
-				form.displayName && form.displayName.trim().length > 0;
-			const hasIcon = form.icon && 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 &&
-				form.fields.some((field) => field.id === "mandatory-title");
-			const hasImageField =
-				form.fields &&
-				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 && form.layout.type && 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));
 };