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

package/src/actions/formActions.js

@@ -0,0 +1,311 @@
+/**
+ * Form Actions for Feature Builder
+ * Manages form state including title, icon, fields, layout, and submission
+ * Handles CRUD operations for form fields and layout configuration
+ * Coordinates with external menu updates and feature definition actions
+ *
+ * @namespace formActions
+ */
+
+import { featureDefinitionActions } from "../webapi/featuresActions";
+import { values } from "../values.config";
+import {
+	updateFeatureBuilderString,
+	updateFeatureBuilderIcon,
+} from "./featureBuilderStringsActions";
+import { toTitleCase } from "../utils/textUtils";
+
+/**
+ * @typedef {Object} FieldValues
+ * @property {string} [label] - Field label text
+ * @property {string} [placeholder] - Placeholder text for input
+ * @property {boolean} [isRequired] - Whether field is required
+ * @property {string} [helpText] - Help text for field guidance
+ * @property {boolean} [allowCaption] - Whether field allows captions
+ * @property {boolean} [useAsSummary] - Whether field is used as summary
+ */
+
+/**
+ * @typedef {Object} FormField
+ * @property {string} id - Unique field identifier
+ * @property {string} type - Field type (text, title, description, image, file, cta, feature-image)
+ * @property {boolean} isMandatory - Whether field is mandatory system field
+ * @property {FieldValues} values - Field configuration values
+ */
+
+/**
+ * @typedef {Object} LayoutConfig
+ * @property {string} type - Layout type (round, square, etc.)
+ * @property {string} [gridIcon] - Background image for grid layout
+ */
+
+export const actionsTypes = {
+	SET_INITIAL_VALUES: "SET_INITIAL_VALUES",
+	SET_TITLE: "SET_TITLE",
+	SET_ICON: "SET_ICON",
+	SET_DISPLAY_NAME: "SET_DISPLAY_NAME",
+	ADD_FIELD: "ADD_FIELD",
+	DELETE_FIELD: "DELETE_FIELD",
+	UPDATE_FIELD: "UPDATE_FIELD",
+	SET_LAYOUT_GRID_ICON: "SET_LAYOUT_GRID_ICON",
+	SET_LAYOUT_TYPE: "SET_LAYOUT_TYPE",
+	SUBMIT_FORM_REQUEST: "SUBMIT_FORM_REQUEST",
+	SUBMIT_FORM_SUCCESS: "SUBMIT_FORM_SUCCESS",
+	SUBMIT_FORM_FAILURE: "SUBMIT_FORM_FAILURE",
+	CLEAR_FORM_SUBMISSION_STATE: "CLEAR_FORM_SUBMISSION_STATE",
+	SET_SUMMARY_FIELD: "SET_SUMMARY_FIELD",
+};
+
+/**
+ * Action creator to set initial form values
+ * Initializes form state with existing feature definition data
+ *
+ * @param {Object} initialValues - Initial form values object
+ * @param {string} initialValues.title - Feature title
+ * @param {string} initialValues.icon - Feature icon
+ * @param {string} initialValues.displayName - Feature display name
+ * @param {LayoutConfig} initialValues.layout - Layout configuration
+ * @param {FormField[]} initialValues.fields - Form fields array
+ * @returns {Object} Redux action object with type and payload
+ *
+ * @example
+ * dispatch(setInitialValues({
+ *   title: 'Contact Form',
+ *   icon: 'envelope',
+ *   fields: []
+ * }));
+ */
+export const setInitialValues = (initialValues) => {
+	return { type: actionsTypes.SET_INITIAL_VALUES, payload: initialValues };
+};
+
+export const setTitle = (title) => {
+	return { type: actionsTypes.SET_TITLE, payload: title };
+};
+
+/**
+ * Action creator to set form display name and update menu
+ * Updates both form state and external menu string
+ * Title cases the display name before updating the strings store
+ *
+ * @param {string} displayName - New display name for form
+ * @returns {Function} Thunk function for Redux
+ *
+ * @example
+ * dispatch(setDisplayName('Contact Information'));
+ */
+export const setDisplayName = (displayName) => {
+	return (dispatch) => {
+		// Update menu string when display name changes (will be title cased in updateFeatureBuilderString)
+		dispatch(updateFeatureBuilderString(displayName));
+
+		// Dispatch the actual action
+		dispatch({
+			type: actionsTypes.SET_DISPLAY_NAME,
+			payload: displayName,
+		});
+	};
+};
+
+/**
+ * Action creator to set form icon and update menu
+ * Updates both form state and external menu icon
+ *
+ * @param {string} icon - Icon identifier or FontAwesome icon class
+ * @returns {Function} Thunk function for Redux
+ *
+ * @example
+ * dispatch(setIcon('fa-user'));
+ */
+export const setIcon = (icon) => {
+	return (dispatch) => {
+		// Update menu icon when icon changes
+		dispatch(updateFeatureBuilderIcon(icon));
+
+		// Dispatch the actual action
+		dispatch({
+			type: actionsTypes.SET_ICON,
+			payload: icon,
+		});
+	};
+};
+
+/**
+ * Action creator to add a new field to the form
+ * Generates unique ID and supports custom field types
+ *
+ * @param {string} [fieldType="text"] - Type of field to add (text, title, description, image, gallery, file, cta, feature-image)
+ * @returns {Object} Redux action object with field ID and type
+ *
+ * @example
+ * dispatch(addField('text'));
+ * dispatch(addField('image'));
+ */
+export const addField = (fieldType = "text") => {
+	// Generate a unique ID for the new field
+	const fieldId = `custom-field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+	return {
+		type: actionsTypes.ADD_FIELD,
+		payload: { id: fieldId, type: fieldType },
+	};
+};
+
+export const deleteField = (id) => {
+	return { type: actionsTypes.DELETE_FIELD, payload: id };
+};
+
+export const updateFieldById = (id, updatedField) => {
+	return { type: actionsTypes.UPDATE_FIELD, payload: { id, updatedField } };
+};
+
+/**
+ * Action creator to set a description field as the summary field
+ * Ensures only one description field can be marked as summary by
+ * automatically unsetting all other description fields when a new one is selected
+ *
+ * @param {string} fieldId - ID of the description field to set as summary
+ * @returns {Object} Redux action object for summary field selection
+ *
+ * @example
+ * dispatch(setSummaryField('field-description-123'));
+ */
+export const setSummaryField = (fieldId) => {
+	return { type: actionsTypes.SET_SUMMARY_FIELD, payload: fieldId };
+};
+
+export const setGridLayoutIcon = (imageUrl) => {
+	return { type: actionsTypes.SET_LAYOUT_GRID_ICON, payload: imageUrl };
+};
+
+export const setLayoutType = (layoutType) => {
+	return { type: actionsTypes.SET_LAYOUT_TYPE, payload: layoutType };
+};
+
+const submitFormRequest = () => {
+	return { type: actionsTypes.SUBMIT_FORM_REQUEST };
+};
+
+const submitFormSuccess = () => {
+	return { type: actionsTypes.SUBMIT_FORM_SUCCESS };
+};
+
+const submitFormFailure = (error) => {
+	return { type: actionsTypes.SUBMIT_FORM_FAILURE, payload: error };
+};
+
+export const clearFormSubmissionState = () => {
+	return { type: actionsTypes.CLEAR_FORM_SUBMISSION_STATE };
+};
+
+/**
+ * Submits the complete feature form to the server
+ * Handles form validation, API submission, and error handling
+ *
+ * @returns {Function} Async thunk function for Redux
+ * @throws {Error} When form validation fails or API submission encounters error
+ */
+export function submitForm() {
+	return async (dispatch, getState) => {
+		const state = getState()[values.reducerKey];
+		const form = state && state.form;
+		if (!form) {
+			dispatch(
+				submitFormFailure(
+					new Error(
+						"Form data is missing. Please refresh the page and try again.",
+					),
+				),
+			);
+			return;
+		}
+
+		dispatch(submitFormRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+
+			// Use mode from fetch instead of checking definition ID
+			const definitionState = state && state.definition;
+			const mode = definitionState && definitionState.mode; // Use stored mode from fetch
+			const definitionId = definitionState && definitionState.id;
+
+			if (mode === "edit") {
+				// Always update when in edit mode
+				const updatedDefinition = {
+					id: definitionId,
+					site: site, // Include site from auth store
+					featureDefinition: {
+						// Wrap in expected structure for backend
+						title: form.title,
+						icon: form.icon,
+						displayName: form.displayName,
+						layout: form.layout,
+						fields: form.fields,
+					},
+				};
+				await featureDefinitionActions.edit(updatedDefinition, site);
+			} else {
+				// Always create when in create mode (or mode is undefined/null)
+				if (!values.featureId || !site) {
+					throw new Error(
+						"Authentication error: Missing required context (featureId or site).",
+					);
+				}
+				await featureDefinitionActions.create(
+					values.featureId,
+					site, // Use actual site from auth store
+					{
+						title: form.title,
+						icon: form.icon,
+						displayName: form.displayName,
+						layout: form.layout,
+						fields: form.fields,
+					},
+				);
+			}
+
+			dispatch(submitFormSuccess());
+		} catch (err) {
+			// Handle different types of errors
+			let errorToDisplay = err;
+
+			if (err.response) {
+				// API error (400, 401, 404, 500, etc.)
+				const { status, data } = err.response;
+				if (status === 400 && data && data.error) {
+					errorToDisplay = new Error(`Validation error: ${data.error}`);
+				} else if (status === 401) {
+					errorToDisplay = new Error(
+						"You are not authorized to perform this action",
+					);
+				} else if (status === 404) {
+					errorToDisplay = new Error("Feature definition not found");
+				} else if (status >= 500) {
+					errorToDisplay = new Error("Server error. Please try again later.");
+				} else {
+					errorToDisplay = new Error(
+						(data && data.error) || `Request failed with status ${status}`,
+					);
+				}
+			} else if (err.request) {
+				// Network error (no response received)
+				errorToDisplay = new Error(
+					"Network error. Please check your connection and try again.",
+				);
+			} else if (err.message) {
+				// Other JavaScript errors
+				errorToDisplay = err;
+			} else {
+				// Unknown error
+				errorToDisplay = new Error("An unexpected error occurred while saving");
+			}
+
+			dispatch(submitFormFailure(errorToDisplay));
+		}
+	};
+}

package/src/actions/index.js

@@ -0,0 +1,12 @@
+import { PlussCore } from "../feature.config";
+
+const { Actions } = PlussCore;
+export const setAuth = Actions.setAuth;
+export const usersLoaded = Actions.usersLoaded;
+export const addRecentlyCreated = Actions.addRecentlyCreated;
+export const setNavData = Actions.setNavData;
+
+// Feature Builder specific actions
+export * from "./featureDefinitionsIndex";
+export * from "./listingActions";
+export * from "./formActions";

package/src/actions/listingActions.js

@@ -0,0 +1,350 @@
+import { arrayMove } from "@dnd-kit/sortable";
+import { listingActions as webApiActions } from "../webapi/listingActions";
+
+// Action Types
+export const FETCH_LISTING_REQUEST = "FETCH_LISTING_REQUEST";
+export const FETCH_LISTING_SUCCESS = "FETCH_LISTING_SUCCESS";
+export const FETCH_LISTING_FAILURE = "FETCH_LISTING_FAILURE";
+export const FETCH_LISTING_SILENT_SUCCESS = "FETCH_LISTING_SILENT_SUCCESS";
+export const FETCH_LISTING_SILENT_FAILURE = "FETCH_LISTING_SILENT_FAILURE";
+
+export const REORDER_LISTING_SUCCESS = "REORDER_LISTING_SUCCESS";
+export const REORDER_LISTING_FAILURE = "REORDER_LISTING_FAILURE";
+
+export const DELETE_LISTING_REQUEST = "DELETE_LISTING_REQUEST";
+export const DELETE_LISTING_SUCCESS = "DELETE_LISTING_SUCCESS";
+export const DELETE_LISTING_FAILURE = "DELETE_LISTING_FAILURE";
+
+export const UNDELETE_LISTING_REQUEST = "UNDELETE_LISTING_REQUEST";
+export const UNDELETE_LISTING_SUCCESS = "UNDELETE_LISTING_SUCCESS";
+export const UNDELETE_LISTING_FAILURE = "UNDELETE_LISTING_FAILURE";
+
+export const CREATE_LISTING_REQUEST = "CREATE_LISTING_REQUEST";
+export const CREATE_LISTING_SUCCESS = "CREATE_LISTING_SUCCESS";
+export const CREATE_LISTING_FAILURE = "CREATE_LISTING_FAILURE";
+
+export const EDIT_LISTING_REQUEST = "EDIT_LISTING_REQUEST";
+export const EDIT_LISTING_SUCCESS = "EDIT_LISTING_SUCCESS";
+export const EDIT_LISTING_FAILURE = "EDIT_LISTING_FAILURE";
+
+export const TOGGLE_LISTING_REQUEST = "TOGGLE_LISTING_REQUEST";
+export const TOGGLE_LISTING_SUCCESS = "TOGGLE_LISTING_SUCCESS";
+export const TOGGLE_LISTING_FAILURE = "TOGGLE_LISTING_FAILURE";
+
+export const SET_SORT_BY = "SET_SORT_BY";
+export const SET_SHOW_DELETED = "SET_SHOW_DELETED";
+
+export const fetchListingRequest = () => ({ type: FETCH_LISTING_REQUEST });
+export const fetchListingSuccess = (listings) => ({
+	type: FETCH_LISTING_SUCCESS,
+	payload: listings,
+});
+export const fetchListingFailure = (error) => ({
+	type: FETCH_LISTING_FAILURE,
+	payload: error,
+});
+
+export const fetchListingSilentSuccess = (listings) => ({
+	type: FETCH_LISTING_SILENT_SUCCESS,
+	payload: listings,
+});
+
+export const fetchListingSilentFailure = (error) => ({
+	type: FETCH_LISTING_SILENT_FAILURE,
+	payload: error,
+});
+
+export const fetchListing = () => {
+	return async (dispatch, getState) => {
+		dispatch(fetchListingRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await webApiActions.getAll(site);
+			// Assuming your API returns the listings directly or in a `data` property
+			const listings = response.data.listings;
+
+			dispatch(fetchListingSuccess(listings));
+		} catch (error) {
+			dispatch(
+				fetchListingFailure(error.message || "Failed to fetch listings"),
+			);
+		}
+	};
+};
+
+export const fetchListingSilent = () => {
+	return async (dispatch, getState) => {
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await webApiActions.getAll(site);
+			// Assuming your API returns the listings directly or in a `data` property
+			const listings = response.data.listings;
+
+			dispatch(fetchListingSilentSuccess(listings));
+		} catch (error) {
+			dispatch(
+				fetchListingSilentFailure(error.message || "Failed to fetch listings"),
+			);
+		}
+	};
+};
+
+export const fetchSingleListing = (id) => {
+	return async (dispatch, getState) => {
+		dispatch(fetchListingRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await webApiActions.getSingle(id, site);
+			dispatch(fetchListingSuccess([response.data])); // Return as array for consistency
+		} catch (error) {
+			dispatch(fetchListingFailure(error.message || "Failed to fetch listing"));
+		}
+	};
+};
+
+export const reorderListingSuccess = (listings) => ({
+	type: REORDER_LISTING_SUCCESS,
+	payload: listings,
+});
+export const reorderListingFailure = (error) => ({
+	type: REORDER_LISTING_FAILURE,
+	payload: error,
+});
+
+export const reorderListing = (listings, oldIndex, newIndex) => {
+	return async (dispatch) => {
+		// Optimistic UI update: update the state immediately
+		const reorderedListings = arrayMove(listings, oldIndex, newIndex);
+		dispatch(reorderListingSuccess(reorderedListings));
+
+		try {
+			// Note: Reorder functionality not available in current API spec
+			// This would need to be implemented if needed
+			// await listingActions.updateOrder(reorderedListings);
+		} catch (error) {
+			// On failure, you might want to revert the state.
+			dispatch(
+				reorderListingFailure(error.message || "Failed to save new order"),
+			);
+		}
+	};
+};
+
+export const deleteListingRequest = (id) => ({
+	type: DELETE_LISTING_REQUEST,
+	payload: id,
+});
+export const deleteListingSuccess = (id) => ({
+	type: DELETE_LISTING_SUCCESS,
+	payload: id,
+});
+export const deleteListingFailure = (error) => ({
+	type: DELETE_LISTING_FAILURE,
+	payload: error,
+});
+
+export const deleteListing = (id) => {
+	return async (dispatch, getState) => {
+		dispatch(deleteListingRequest(id));
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			await webApiActions.delete(id, site);
+			dispatch(deleteListingSuccess(id));
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error.message || "Failed to delete listing";
+			dispatch(deleteListingFailure(errorMessage));
+			throw new Error(errorMessage);
+		}
+	};
+};
+
+export const undeleteListingRequest = (id) => ({
+	type: UNDELETE_LISTING_REQUEST,
+	payload: id,
+});
+export const undeleteListingSuccess = (listing) => ({
+	type: UNDELETE_LISTING_SUCCESS,
+	payload: listing,
+});
+export const undeleteListingFailure = (error) => ({
+	type: UNDELETE_LISTING_FAILURE,
+	payload: error,
+});
+
+export const undeleteListing = (id) => {
+	return async (dispatch, getState) => {
+		dispatch(undeleteListingRequest(id));
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await webApiActions.undelete(id, site);
+			// If API returns the restored listing, use it; otherwise we'll need to refetch
+			const restoredListing = response.data;
+			if (restoredListing && restoredListing.id) {
+				dispatch(undeleteListingSuccess(restoredListing));
+			} else {
+				// Trigger a refetch by dispatching the success with just ID, then fetch updated listings
+				dispatch(undeleteListingSuccess(id));
+				// Fetch updated listings to get the restored one
+				dispatch(fetchListingSilent());
+			}
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error.message || "Failed to restore listing";
+			dispatch(undeleteListingFailure(errorMessage));
+			throw new Error(errorMessage);
+		}
+	};
+};
+
+export const createListingRequest = () => ({ type: CREATE_LISTING_REQUEST });
+export const createListingSuccess = (listing) => ({
+	type: CREATE_LISTING_SUCCESS,
+	payload: listing,
+});
+export const createListingFailure = (error) => ({
+	type: CREATE_LISTING_FAILURE,
+	payload: error,
+});
+
+export const createListing = (listing) => {
+	return async (dispatch, getState) => {
+		dispatch(createListingRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await webApiActions.create(listing, site);
+
+			// Assuming the API returns the newly created listing
+			const newListing = response.data || response;
+			dispatch(createListingSuccess(newListing));
+			return newListing;
+		} catch (error) {
+			const errorMessage =
+				error.response?.data?.message ||
+				error.message ||
+				"Failed to create listing";
+			dispatch(createListingFailure(errorMessage));
+			throw error; // Re-throw to allow component to handle
+		}
+	};
+};
+
+export const editListingRequest = () => ({ type: EDIT_LISTING_REQUEST });
+export const editListingSuccess = (listing) => ({
+	type: EDIT_LISTING_SUCCESS,
+	payload: listing,
+});
+export const editListingFailure = (error) => ({
+	type: EDIT_LISTING_FAILURE,
+	payload: error,
+});
+
+export const editListing = (listing) => {
+	return async (dispatch, getState) => {
+		dispatch(editListingRequest());
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			const response = await webApiActions.edit(listing, site);
+			const updatedListing = response.data || response;
+			dispatch(editListingSuccess(updatedListing));
+			return updatedListing;
+		} catch (error) {
+			const errorMessage =
+				error.response?.data?.message ||
+				error.message ||
+				"Failed to update listing";
+			dispatch(editListingFailure(errorMessage));
+			throw error; // Re-throw to allow component to handle
+		}
+	};
+};
+
+export const toggleListingRequest = (id) => ({
+	type: TOGGLE_LISTING_REQUEST,
+	payload: id,
+});
+
+export const toggleListingSuccess = (id, isActive) => ({
+	type: TOGGLE_LISTING_SUCCESS,
+	payload: { id, isActive },
+});
+
+export const toggleListingFailure = (error) => ({
+	type: TOGGLE_LISTING_FAILURE,
+	payload: error,
+});
+
+export const toggleListing = (id, isActive) => {
+	return async (dispatch, getState) => {
+		dispatch(toggleListingRequest(id));
+		try {
+			// Get site from auth store
+			const site = getState().auth.site;
+			if (!site) {
+				throw new Error(
+					"Authentication error: Site context not found. Please refresh and login again.",
+				);
+			}
+			// Update the listing with the new active state
+			await webApiActions.edit({ id, isActive }, site);
+			dispatch(toggleListingSuccess(id, isActive));
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error.message || "Failed to toggle listing";
+			dispatch(toggleListingFailure(errorMessage));
+			throw new Error(errorMessage);
+		}
+	};
+};
+
+export const setSortBy = (sortBy) => ({
+	type: SET_SORT_BY,
+	payload: sortBy,
+});
+
+export const setShowDeleted = (showDeleted) => ({
+	type: SET_SHOW_DELETED,
+	payload: showDeleted,
+});