@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.0

package/src/reducers/featureBuilderReducer.js

@@ -0,0 +1,744 @@
+/**
+ * Feature Builder Redux Reducer
+ * Manages state for feature creation wizard including:
+ * - Form state (title, icon, fields, layout)
+ * - Validation and step management
+ * - Loading and error states
+ * - Feature definitions CRUD operations
+ *
+ * @typedef {Object} FeatureBuilderState
+ * @property {Object} formState - Current form configuration
+ * @property {Array} featureDefinitions - Available feature definitions
+ * @property {Object} wizardState - Wizard navigation and validation state
+ * @property {boolean} loading - Loading state for async operations
+ * @property {Error} error - Current error state
+ *
+ * @param {FeatureBuilderState} state - Current Redux state
+ * @param {Object} action - Redux action to process
+ * @returns {FeatureBuilderState} New Redux state
+ *
+ * @example
+ * // Reducer is used automatically with Redux
+ * const store = createStore(featureBuilderReducer, initialState);
+ */
+// Import action types from existing files
+import { actionsTypes as formActionTypes } from "../actions/formActions";
+import {
+	FETCH_FEATURES_REQUEST,
+	FETCH_FEATURES_SUCCESS,
+	FETCH_FEATURES_FAILURE,
+	FEATURE_CREATE_REQUEST,
+	FEATURE_CREATE_SUCCESS,
+	FEATURE_CREATE_FAILURE,
+	FEATURE_EDIT_REQUEST,
+	FEATURE_EDIT_SUCCESS,
+	FEATURE_EDIT_FAILURE,
+	FEATURE_DELETE_REQUEST,
+	FEATURE_DELETE_FAILURE,
+	SYNC_WIZARD_MODE_FROM_DEFINITION,
+	SET_WIZARD_MODE,
+} from "../actions/featureDefinitionsIndex";
+
+import {
+	FETCH_LISTING_REQUEST,
+	FETCH_LISTING_SUCCESS,
+	FETCH_LISTING_FAILURE,
+	FETCH_LISTING_SILENT_SUCCESS,
+	FETCH_LISTING_SILENT_FAILURE,
+	REORDER_LISTING_SUCCESS,
+	REORDER_LISTING_FAILURE,
+	DELETE_LISTING_REQUEST,
+	DELETE_LISTING_SUCCESS,
+	DELETE_LISTING_FAILURE,
+	UNDELETE_LISTING_REQUEST,
+	UNDELETE_LISTING_SUCCESS,
+	UNDELETE_LISTING_FAILURE,
+	CREATE_LISTING_REQUEST,
+	CREATE_LISTING_SUCCESS,
+	CREATE_LISTING_FAILURE,
+	EDIT_LISTING_REQUEST,
+	EDIT_LISTING_SUCCESS,
+	EDIT_LISTING_FAILURE,
+	TOGGLE_LISTING_REQUEST,
+	TOGGLE_LISTING_SUCCESS,
+	TOGGLE_LISTING_FAILURE,
+	SET_SORT_BY,
+	SET_SHOW_DELETED,
+} from "../actions/listingActions";
+
+import { values } from "../values.config";
+
+// Wizard action types (local declarations only)
+const SET_NAVIGATION_STATE = "SET_NAVIGATION_STATE";
+const UPDATE_STEP_VALIDATION = "UPDATE_STEP_VALIDATION";
+const MARK_STEP_COMPLETE = "MARK_STEP_COMPLETE";
+const RESET_WIZARD_STATE = "RESET_WIZARD_STATE";
+
+// Default new field definition
+const DEFAULT_NEW_FIELD = {
+	type: "text",
+	isMandatory: false,
+	values: {
+		label: "",
+		placeholder: "",
+		isRequired: false,
+		helpText: "",
+		allowCaption: false, // Default to not allowing captions for image fields
+		useAsSummary: false, // Default to not using as summary for description fields
+		minImages: 1, // Gallery-specific default
+		maxImages: 10, // Gallery-specific default
+		maxFileSize: "5MB", // Gallery-specific default
+		allowedTypes: [], // Gallery-specific default
+	},
+};
+
+function createNewField(id, type = "text", existingFields = []) {
+	const baseField = {
+		...DEFAULT_NEW_FIELD,
+		id,
+		type,
+		values: { ...DEFAULT_NEW_FIELD.values },
+	};
+
+	// Calculate order for new field
+	const maxOrder = Math.max(...existingFields.map((f) => f.order || 0), 1); // Start from 1 since title is order 1
+	baseField.order = maxOrder + 1;
+
+	// Set default values based on field type
+	switch (type) {
+		case "title":
+			baseField.values.label = "Title";
+			baseField.values.placeholder = "Enter title";
+			baseField.values.helpText = "The main title or heading for this item";
+			baseField.values.isRequired = true;
+			break;
+
+		case "text":
+			baseField.values.label = "Text";
+			baseField.values.placeholder = "Enter text";
+			baseField.values.helpText = "Provide additional text information";
+			baseField.values.isRequired = true;
+			break;
+
+		case "description":
+			baseField.values.label = "Description";
+			baseField.values.placeholder = "Enter description";
+			baseField.values.helpText = "Detailed description of the item";
+			break;
+
+		case "image": {
+			baseField.values.label = "Image Upload";
+			baseField.values.helpText = "Upload an image to display";
+			const { placeholder, ...valuesWithoutPlaceholder } = baseField.values;
+			baseField.values = valuesWithoutPlaceholder;
+			break;
+		}
+
+		case "gallery": {
+			baseField.values.label = "Image Gallery";
+			baseField.values.helpText = "Upload multiple images to create a gallery";
+			baseField.values.minImages = 1;
+			baseField.values.maxImages = 10;
+			baseField.values.maxFileSize = "5MB";
+			baseField.values.allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+			const {
+				placeholder: galleryPlaceholder,
+				...galleryValuesWithoutPlaceholder
+			} = baseField.values;
+			baseField.values = galleryValuesWithoutPlaceholder;
+			break;
+		}
+
+		case "feature-image": {
+			baseField.values.label = "Feature Image";
+			baseField.values.helpText = "Main featured image for this item";
+			baseField.values.isRequired = true;
+			const {
+				placeholder: ph,
+				allowCaption,
+				...valuesWithoutCaptionAndPlaceholder
+			} = baseField.values;
+			baseField.values = valuesWithoutCaptionAndPlaceholder;
+			break;
+		}
+
+		case "cta":
+			baseField.values.label = "Action Button";
+			baseField.values.placeholder = "Button text";
+			baseField.values.helpText = "Text to display on the action button";
+			break;
+
+		case "file":
+			baseField.values.label = "File";
+			baseField.values.placeholder = "Select file";
+			baseField.values.helpText = "Upload a file for users to download";
+			break;
+
+		default:
+			baseField.values.label = "Field";
+			baseField.values.placeholder = "Enter value";
+			baseField.values.helpText = "Provide information for this field";
+			break;
+	}
+
+	return baseField;
+}
+
+// Initial form state (from existing formReducer)
+const INITIAL_FORM_STATE = {
+	_isInitial: true,
+	title: "",
+	icon: values.defaultIcon,
+	displayName: "",
+	layout: {
+		gridIcon: undefined,
+		type: "round",
+	},
+	fields: [
+		{
+			id: "mandatory-feature-image",
+			type: "feature-image",
+			isMandatory: true,
+			order: 0,
+			values: {
+				label: "Feature Image",
+				isRequired: true, // Feature image is always required
+				helpText: "The main picture to display on the content",
+			},
+		},
+		{
+			id: "mandatory-title",
+			type: "title",
+			isMandatory: true,
+			order: 1,
+			values: {
+				label: "Title",
+				placeholder: "Enter title here",
+				isRequired: true,
+				helpText: "The title of your listing",
+			},
+		},
+	],
+};
+
+// Helper function to get initial wizard state
+const getInitialWizardState = () => {
+	return {
+		mode: "create", // 'create' | 'edit'
+		navigation: {
+			currentStep: "welcome", // 'welcome' | 'overview' | 'fields' | 'layout'
+			previousStep: null,
+			canGoBack: false,
+			canGoForward: true,
+		},
+		stepValidation: {
+			overview: { isValid: false, errors: {} },
+			fields: { isValid: false, errors: {} },
+			layout: { isValid: false, errors: {} },
+		},
+		stepCompletion: {
+			overview: false,
+			fields: false,
+			layout: false,
+		},
+	};
+};
+
+// Initial consolidated state
+const INITIAL_STATE = {
+	form: INITIAL_FORM_STATE,
+	definition: {
+		id: null,
+		definition: null,
+		isLoading: false,
+		error: null,
+		isCreating: false,
+		isEditing: false,
+		mode: null, // Add mode field
+	},
+	listings: {
+		listings: [],
+		isLoading: false,
+		isCreating: false,
+		isEditing: false,
+		isRestoring: false,
+		error: null,
+		sortBy: "newest",
+		showDeleted: false,
+		isInitiallyLoaded: false,
+	},
+	wizard: getInitialWizardState(),
+};
+
+// Form reducer logic (from existing formReducer)
+const formReducer = (state = INITIAL_FORM_STATE, action) => {
+	const { type, payload } = action;
+
+	switch (type) {
+		case formActionTypes.SET_INITIAL_VALUES: {
+			// The actual definition data is in payload.featureDefinition.definition
+			const definitionWrapper =
+				payload && payload.featureDefinition
+					? payload.featureDefinition
+					: payload;
+			const definition =
+				definitionWrapper && definitionWrapper.definition
+					? definitionWrapper.definition
+					: definitionWrapper;
+
+			// Validate and map definition data to form state structure
+			const mappedValues = {
+				title: (definition && definition.title) || "",
+				icon: (definition && definition.icon) || "star",
+				displayName: (definition && definition.displayName) || "",
+				layout: (definition && definition.layout) || {
+					gridIcon: undefined,
+					type: "round",
+				},
+				fields:
+					definition && Array.isArray(definition.fields)
+						? definition.fields
+						: state.fields,
+			};
+
+			const newState = {
+				...state,
+				...mappedValues,
+				_isInitial: false,
+			};
+			return newState;
+		}
+
+		case formActionTypes.SET_TITLE:
+			return { ...state, title: payload };
+
+		case formActionTypes.SET_ICON:
+			return { ...state, icon: payload };
+
+		case formActionTypes.SET_DISPLAY_NAME:
+			return { ...state, displayName: payload };
+
+		case formActionTypes.ADD_FIELD: {
+			// Safety check for payload
+			if (!payload || !payload.id) {
+				return state;
+			}
+
+			const newField = createNewField(payload.id, payload.type, state.fields);
+			const newFields = [...state.fields, newField];
+			return { ...state, fields: newFields };
+		}
+
+		case formActionTypes.DELETE_FIELD: {
+			const newFields = state.fields.filter((field) => field.id !== payload);
+			return { ...state, fields: newFields };
+		}
+
+		case formActionTypes.UPDATE_FIELD: {
+			const { id, updatedField } = payload;
+
+			// Safety check: ensure payload is valid
+			if (!id || !updatedField || typeof updatedField !== "object") {
+				return state;
+			}
+
+			const newFields = state.fields.map((field) => {
+				if (field.id === id) {
+					// Preserve existing field structure and merge updates safely
+					const updatedFieldWithSafety = {
+						...field, // Preserve all existing properties
+						...updatedField, // Merge updates (should be {values: {...}})
+					};
+					return updatedFieldWithSafety;
+				}
+				return field;
+			});
+
+			return { ...state, fields: newFields };
+		}
+
+		case formActionTypes.SET_SUMMARY_FIELD: {
+			// Safety check: ensure payload is valid
+			if (!payload) {
+				return state;
+			}
+
+			const newFields = state.fields.map((field) => {
+				if (field.id === payload) {
+					// Set the selected field as summary
+					return {
+						...field,
+						values: {
+							...field.values,
+							useAsSummary: true,
+						},
+					};
+				} else if (field.type === "description") {
+					// Unset all other description fields
+					return {
+						...field,
+						values: {
+							...field.values,
+							useAsSummary: false,
+						},
+					};
+				}
+				return field;
+			});
+
+			return { ...state, fields: newFields };
+		}
+
+		case formActionTypes.SET_LAYOUT_GRID_ICON: {
+			return {
+				...state,
+				layout: { ...state.layout, gridIcon: payload },
+			};
+		}
+
+		case formActionTypes.SET_LAYOUT_TYPE: {
+			return {
+				...state,
+				layout: { ...state.layout, type: payload },
+			};
+		}
+
+		case formActionTypes.SUBMIT_FORM_REQUEST:
+			return {
+				...state,
+				_isSubmitting: true,
+				_submitError: null,
+				_submitSuccess: false,
+			};
+
+		case formActionTypes.SUBMIT_FORM_SUCCESS:
+			return {
+				...state,
+				_isSubmitting: false,
+				_submitError: null,
+				_submitSuccess: true,
+			};
+
+		case formActionTypes.SUBMIT_FORM_FAILURE:
+			return {
+				...state,
+				_isSubmitting: false,
+				_submitError: payload,
+				_submitSuccess: false,
+			};
+
+		case formActionTypes.CLEAR_FORM_SUBMISSION_STATE:
+			return {
+				...state,
+				_isSubmitting: false,
+				_submitError: null,
+				_submitSuccess: false,
+			};
+
+		default:
+			return state;
+	}
+};
+
+// Wizard reducer logic - now a pure function
+const wizardReducer = (state = INITIAL_STATE.wizard, action) => {
+	const { type, payload } = action;
+
+	switch (type) {
+		case SYNC_WIZARD_MODE_FROM_DEFINITION:
+			return {
+				...state,
+				mode: payload,
+				navigation: {
+					...state.navigation,
+					currentStep: "overview",
+				},
+			};
+
+		case SET_WIZARD_MODE:
+			return {
+				...state,
+				mode: payload,
+			};
+
+		case SET_NAVIGATION_STATE:
+			return {
+				...state,
+				navigation: {
+					...state.navigation,
+					...payload,
+				},
+			};
+
+		case UPDATE_STEP_VALIDATION:
+			return {
+				...state,
+				stepValidation: {
+					...state.stepValidation,
+					[payload.step]: {
+						isValid: payload.isValid,
+						errors: payload.errors || {},
+					},
+				},
+			};
+
+		case MARK_STEP_COMPLETE:
+			return {
+				...state,
+				stepCompletion: {
+					...state.stepCompletion,
+					[payload]: true,
+				},
+			};
+
+		case RESET_WIZARD_STATE:
+			return INITIAL_STATE.wizard;
+
+		default:
+			return state;
+	}
+};
+
+// Definition reducer logic (simplified for single definition)
+const definitionReducer = (state = INITIAL_STATE.definition, action) => {
+	const { type, payload } = action;
+
+	switch (type) {
+		case FETCH_FEATURES_REQUEST:
+			return { ...state, isLoading: true, error: null };
+
+		case FETCH_FEATURES_SUCCESS: {
+			// payload now includes mode: 'edit' or 'create'
+			const { data, mode } = payload || {};
+
+			let definition = null;
+			let definitionId = values.featureId; // Always use hardcoded ID
+
+			if (mode === "edit" && data) {
+				// Extract from API response for edit mode
+				// Handle nested structure: data.featureDefinition.definition
+				const featureDefinitionWrapper =
+					data && data.featureDefinition ? data.featureDefinition : data;
+				definition =
+					featureDefinitionWrapper && featureDefinitionWrapper.definition
+						? featureDefinitionWrapper.definition
+						: featureDefinitionWrapper;
+				definitionId =
+					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
+					values.featureId;
+
+				// Ensure fields array exists and preserves order property
+				if (definition && definition.fields) {
+					// Create a new array to ensure we preserve all field properties including order
+					definition.fields = definition.fields.map((field) => ({
+						...field,
+						// Ensure order property exists, fallback to array index if missing
+						order: field.order !== undefined ? field.order : 999,
+					}));
+				}
+			}
+
+			return {
+				...state,
+				definition,
+				id: definitionId,
+				isLoading: false,
+				error: null,
+				mode, // Store the mode from fetch
+			};
+		}
+
+		case FETCH_FEATURES_FAILURE:
+			return { ...state, isLoading: false, error: payload };
+
+		case FEATURE_CREATE_REQUEST:
+			return { ...state, isCreating: true, error: null };
+
+		case FEATURE_CREATE_FAILURE:
+			return { ...state, isCreating: false, error: payload };
+
+		case FEATURE_CREATE_SUCCESS:
+			return {
+				...state,
+				isCreating: false,
+				definition: {
+					...state.definition,
+					definition: payload, // Optimistically update with new definition
+					mode: "edit", // Switch to edit mode immediately
+				},
+				id: payload && payload.id,
+				error: null,
+			};
+
+		case FEATURE_EDIT_REQUEST:
+			return { ...state, isEditing: true, error: null };
+
+		case FEATURE_EDIT_FAILURE:
+			return { ...state, isEditing: false, error: payload };
+
+		case FEATURE_EDIT_SUCCESS:
+			return {
+				...state,
+				isEditing: false,
+				definition: payload,
+				error: null,
+			};
+
+		case FEATURE_DELETE_REQUEST:
+			return { ...state, isLoading: true };
+
+		case FEATURE_DELETE_FAILURE:
+			return { ...state, isLoading: false, error: payload };
+
+		default:
+			return state;
+	}
+};
+
+// Listings reducer logic (updated to use 'listings' instead of 'items')
+const listingsReducer = (state = INITIAL_STATE.listings, action) => {
+	const { type, payload } = action;
+
+	switch (type) {
+		case FETCH_LISTING_REQUEST:
+			return { ...state, isLoading: true, error: null };
+
+		case FETCH_LISTING_SUCCESS:
+			return {
+				...state,
+				isLoading: false,
+				listings: payload,
+				isInitiallyLoaded: true,
+			};
+
+		case FETCH_LISTING_FAILURE:
+			return { ...state, isLoading: false, error: payload };
+
+		case FETCH_LISTING_SILENT_SUCCESS:
+			return { ...state, listings: payload, isInitiallyLoaded: true };
+
+		case FETCH_LISTING_SILENT_FAILURE:
+			return { ...state, error: payload };
+
+		case REORDER_LISTING_SUCCESS:
+			return { ...state, listings: payload };
+
+		case DELETE_LISTING_SUCCESS:
+			return {
+				...state,
+				listings: state.listings.map((listing) =>
+					listing.id === payload
+						? { ...listing, deletedAt: new Date().toISOString() }
+						: listing,
+				),
+			};
+
+		case DELETE_LISTING_FAILURE:
+			return { ...state, error: payload };
+
+		case UNDELETE_LISTING_REQUEST:
+			return { ...state, isRestoring: true, error: null };
+
+		case UNDELETE_LISTING_SUCCESS:
+			// Handle both scenarios: restored listing data or just ID
+			if (typeof payload === "object" && payload.id) {
+				// We have the restored listing data - add it back to the list
+				const restoredListing = payload;
+				const listingExists = state.listings.some(
+					(listing) => listing.id === restoredListing.id,
+				);
+				if (!listingExists) {
+					return {
+						...state,
+						listings: [...state.listings, restoredListing],
+						error: null,
+						isRestoring: false,
+					};
+				}
+				// Listing already exists, update it
+				return {
+					...state,
+					listings: state.listings.map((listing) =>
+						listing.id === restoredListing.id ? restoredListing : listing,
+					),
+					error: null,
+					isRestoring: false,
+				};
+			} else {
+				// We only have the ID - don't set loading as fetchListingSilent will handle the update
+				return { ...state, error: null, isRestoring: false };
+			}
+
+		case UNDELETE_LISTING_FAILURE:
+			return { ...state, error: payload, isRestoring: false };
+
+		case CREATE_LISTING_REQUEST:
+			return { ...state, isCreating: true, error: null };
+
+		case CREATE_LISTING_SUCCESS:
+			return {
+				...state,
+				isCreating: false,
+				listings: [...state.listings, payload],
+			};
+
+		case CREATE_LISTING_FAILURE:
+			return { ...state, isCreating: false, error: payload };
+
+		case EDIT_LISTING_REQUEST:
+			return { ...state, isEditing: true, error: null };
+
+		case EDIT_LISTING_SUCCESS:
+			return {
+				...state,
+				isEditing: false,
+				listings: state.listings.map((listing) =>
+					listing.id === payload.id ? payload : listing,
+				),
+				error: null,
+			};
+
+		case EDIT_LISTING_FAILURE:
+			return { ...state, isEditing: false, error: payload };
+
+		case TOGGLE_LISTING_SUCCESS:
+			return {
+				...state,
+				listings: state.listings.map((listing) =>
+					listing.id === payload.id
+						? { ...listing, isActive: payload.isActive }
+						: listing,
+				),
+			};
+
+		case TOGGLE_LISTING_FAILURE:
+			return { ...state, error: payload };
+
+		case SET_SORT_BY:
+			return { ...state, sortBy: payload };
+
+		case SET_SHOW_DELETED:
+			return { ...state, showDeleted: payload };
+
+		default:
+			return state;
+	}
+};
+
+// Main consolidated reducer - now eliminates circular dependencies
+export function featureBuilderReducer(state = INITIAL_STATE, action) {
+	// Calculate new states for all reducers independently
+	const newForm = formReducer(state.form, action);
+	const newDefinition = definitionReducer(state.definition, action);
+	const newListings = listingsReducer(state.listings, action);
+	const newWizard = wizardReducer(state.wizard, action);
+
+	return {
+		form: newForm,
+		definition: newDefinition,
+		listings: newListings,
+		wizard: newWizard,
+	};
+}
+
+export default featureBuilderReducer;