@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.1 → 1.0.2-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-feature-builder-web-a",
-  "version": "1.0.2-beta.1",
+  "version": "1.0.2-beta.10",
   "description": "Contains the feature builder extension for the pluss communities ",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -51,4 +51,4 @@
     "react-fontawesome": "^1.6.1"
   },
   "keywords": []
-}
+}

package/rollup.config.js

@@ -56,6 +56,7 @@ MODE.map((m) => {
 				postcss: {
 					plugins: [autoprefixer()],
 				},
+				autoModules: /\.module\.css$/,
 			}),
 			json(),
 			image(),

package/src/actions/featureDefinitionsIndex.js

@@ -6,25 +6,25 @@ import {
 	updatePermissionNames,
 } from "./featureBuilderStringsActions";
 
-export const FETCH_FEATURES_REQUEST = "FETCH_FEATURES_REQUEST";
-export const FETCH_FEATURES_SUCCESS = "FETCH_FEATURES_SUCCESS";
-export const FETCH_FEATURES_FAILURE = "FETCH_FEATURES_FAILURE";
+const REDUCER_PREFIX = values.reducerKey.toUpperCase();
+export const FETCH_FEATURES_REQUEST = `${REDUCER_PREFIX}_FETCH_FEATURES_REQUEST`;
+export const FETCH_FEATURES_SUCCESS = `${REDUCER_PREFIX}_FETCH_FEATURES_SUCCESS`;
+export const FETCH_FEATURES_FAILURE = `${REDUCER_PREFIX}_FETCH_FEATURES_FAILURE`;
 
-export const FEATURE_CREATE_REQUEST = "FEATURE_CREATE_REQUEST";
-export const FEATURE_CREATE_SUCCESS = "FEATURE_CREATE_SUCCESS";
-export const FEATURE_CREATE_FAILURE = "FEATURE_CREATE_FAILURE";
+export const FEATURE_CREATE_REQUEST = `${REDUCER_PREFIX}_FEATURE_CREATE_REQUEST`;
+export const FEATURE_CREATE_SUCCESS = `${REDUCER_PREFIX}_FEATURE_CREATE_SUCCESS`;
+export const FEATURE_CREATE_FAILURE = `${REDUCER_PREFIX}_FEATURE_CREATE_FAILURE`;
 
-export const FEATURE_EDIT_REQUEST = "FEATURE_EDIT_REQUEST";
-export const FEATURE_EDIT_SUCCESS = "FEATURE_EDIT_SUCCESS";
-export const FEATURE_EDIT_FAILURE = "FEATURE_EDIT_FAILURE";
+export const FEATURE_EDIT_REQUEST = `${REDUCER_PREFIX}_FEATURE_EDIT_REQUEST`;
+export const FEATURE_EDIT_SUCCESS = `${REDUCER_PREFIX}_FEATURE_EDIT_SUCCESS`;
+export const FEATURE_EDIT_FAILURE = `${REDUCER_PREFIX}_FEATURE_EDIT_FAILURE`;
 
-export const FEATURE_DELETE_REQUEST = "FEATURE_DELETE_REQUEST";
-export const FEATURE_DELETE_FAILURE = "FEATURE_DELETE_FAILURE";
+export const FEATURE_DELETE_REQUEST = `${REDUCER_PREFIX}_FEATURE_DELETE_REQUEST`;
+export const FEATURE_DELETE_FAILURE = `${REDUCER_PREFIX}_FEATURE_DELETE_FAILURE`;
 
 // Wizard synchronization action types
-export const SYNC_WIZARD_MODE_FROM_DEFINITION =
-	"SYNC_WIZARD_MODE_FROM_DEFINITION";
-export const SET_WIZARD_MODE = "SET_WIZARD_MODE";
+export const SYNC_WIZARD_MODE_FROM_DEFINITION = `${REDUCER_PREFIX}_SYNC_WIZARD_MODE_FROM_DEFINITION`;
+export const SET_WIZARD_MODE = `${REDUCER_PREFIX}_SET_WIZARD_MODE`;
 
 function fetchFeaturesRequest() {
 	return { type: FETCH_FEATURES_REQUEST };
@@ -160,7 +160,7 @@ export function fetchFeatureDefinitions() {
 			}
 		} catch (err) {
 			// Check if it's a 404 (feature doesn't exist)
-			if (err.response && err.response.status === 404) {
+			if (err.response?.status === 404) {
 				// 404: Feature doesn't exist → create mode
 				dispatch(fetchFeaturesSuccess(null, "create"));
 

package/src/actions/formActions.js

@@ -1,19 +1,10 @@
-/**
- * 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,
+	updatePermissionNames,
 } from "./featureBuilderStringsActions";
-import { toTitleCase } from "../utils/textUtils";
 
 /**
  * @typedef {Object} FieldValues
@@ -40,20 +31,20 @@ import { toTitleCase } from "../utils/textUtils";
  */
 
 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",
+	SET_INITIAL_VALUES: `${values.reducerKey.toUpperCase()}_SET_INITIAL_VALUES`,
+	SET_TITLE: `${values.reducerKey.toUpperCase()}_SET_TITLE`,
+	SET_ICON: `${values.reducerKey.toUpperCase()}_SET_ICON`,
+	SET_DISPLAY_NAME: `${values.reducerKey.toUpperCase()}_SET_DISPLAY_NAME`,
+	ADD_FIELD: `${values.reducerKey.toUpperCase()}_ADD_FIELD`,
+	DELETE_FIELD: `${values.reducerKey.toUpperCase()}_DELETE_FIELD`,
+	UPDATE_FIELD: `${values.reducerKey.toUpperCase()}_UPDATE_FIELD`,
+	SET_LAYOUT_GRID_ICON: `${values.reducerKey.toUpperCase()}_SET_LAYOUT_GRID_ICON`,
+	SET_LAYOUT_TYPE: `${values.reducerKey.toUpperCase()}_SET_LAYOUT_TYPE`,
+	SUBMIT_FORM_REQUEST: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_REQUEST`,
+	SUBMIT_FORM_SUCCESS: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_SUCCESS`,
+	SUBMIT_FORM_FAILURE: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_FAILURE`,
+	CLEAR_FORM_SUBMISSION_STATE: `${values.reducerKey.toUpperCase()}_CLEAR_FORM_SUBMISSION_STATE`,
+	SET_SUMMARY_FIELD: `${values.reducerKey.toUpperCase()}_SET_SUMMARY_FIELD`,
 };
 
 /**
@@ -207,7 +198,7 @@ export const clearFormSubmissionState = () => {
 export function submitForm() {
 	return async (dispatch, getState) => {
 		const state = getState()[values.reducerKey];
-		const form = state && state.form;
+		const form = state?.form;
 		if (!form) {
 			dispatch(
 				submitFormFailure(
@@ -230,9 +221,9 @@ export function submitForm() {
 			}
 
 			// 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;
+			const definitionState = state?.definition;
+			const mode = definitionState?.mode; // Use stored mode from fetch
+			const definitionId = definitionState?.id;
 
 			if (mode === "edit") {
 				// Always update when in edit mode
@@ -270,6 +261,16 @@ export function submitForm() {
 			}
 
 			dispatch(submitFormSuccess());
+
+			// After creating a feature, update menu strings
+			if (mode !== "edit") {
+				// Update menu string with title and icon
+				dispatch(updateFeatureBuilderString(form.title));
+				dispatch(updateFeatureBuilderIcon(form.icon));
+
+				// Update permission names based on feature title
+				dispatch(updatePermissionNames(form.title));
+			}
 		} catch (err) {
 			// Handle different types of errors
 			let errorToDisplay = err;
@@ -277,7 +278,7 @@ export function submitForm() {
 			if (err.response) {
 				// API error (400, 401, 404, 500, etc.)
 				const { status, data } = err.response;
-				if (status === 400 && data && data.error) {
+				if (status === 400 && data?.error) {
 					errorToDisplay = new Error(`Validation error: ${data.error}`);
 				} else if (status === 401) {
 					errorToDisplay = new Error(
@@ -289,7 +290,7 @@ export function submitForm() {
 					errorToDisplay = new Error("Server error. Please try again later.");
 				} else {
 					errorToDisplay = new Error(
-						(data && data.error) || `Request failed with status ${status}`,
+						data?.error || `Request failed with status ${status}`,
 					);
 				}
 			} else if (err.request) {

package/src/actions/listingActions.js

@@ -1,38 +1,40 @@
 import { arrayMove } from "@dnd-kit/sortable";
 import { listingActions as webApiActions } from "../webapi/listingActions";
+import { values } from "../values.config";
 
 // 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";
+const REDUCER_PREFIX = values.reducerKey.toUpperCase();
+export const FETCH_LISTING_REQUEST = `${REDUCER_PREFIX}_FETCH_LISTING_REQUEST`;
+export const FETCH_LISTING_SUCCESS = `${REDUCER_PREFIX}_FETCH_LISTING_SUCCESS`;
+export const FETCH_LISTING_FAILURE = `${REDUCER_PREFIX}_FETCH_LISTING_FAILURE`;
+export const FETCH_LISTING_SILENT_SUCCESS = `${REDUCER_PREFIX}_FETCH_LISTING_SILENT_SUCCESS`;
+export const FETCH_LISTING_SILENT_FAILURE = `${REDUCER_PREFIX}_FETCH_LISTING_SILENT_FAILURE`;
 
-export const REORDER_LISTING_SUCCESS = "REORDER_LISTING_SUCCESS";
-export const REORDER_LISTING_FAILURE = "REORDER_LISTING_FAILURE";
+export const REORDER_LISTING_SUCCESS = `${REDUCER_PREFIX}_REORDER_LISTING_SUCCESS`;
+export const REORDER_LISTING_FAILURE = `${REDUCER_PREFIX}_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 DELETE_LISTING_REQUEST = `${REDUCER_PREFIX}_DELETE_LISTING_REQUEST`;
+export const DELETE_LISTING_SUCCESS = `${REDUCER_PREFIX}_DELETE_LISTING_SUCCESS`;
+export const DELETE_LISTING_FAILURE = `${REDUCER_PREFIX}_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 UNDELETE_LISTING_REQUEST = `${REDUCER_PREFIX}_UNDELETE_LISTING_REQUEST`;
+export const UNDELETE_LISTING_SUCCESS = `${REDUCER_PREFIX}_UNDELETE_LISTING_SUCCESS`;
+export const UNDELETE_LISTING_FAILURE = `${REDUCER_PREFIX}_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 CREATE_LISTING_REQUEST = `${REDUCER_PREFIX}_CREATE_LISTING_REQUEST`;
+export const CREATE_LISTING_SUCCESS = `${REDUCER_PREFIX}_CREATE_LISTING_SUCCESS`;
+export const CREATE_LISTING_FAILURE = `${REDUCER_PREFIX}_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 EDIT_LISTING_REQUEST = `${REDUCER_PREFIX}_EDIT_LISTING_REQUEST`;
+export const EDIT_LISTING_SUCCESS = `${REDUCER_PREFIX}_EDIT_LISTING_SUCCESS`;
+export const EDIT_LISTING_FAILURE = `${REDUCER_PREFIX}_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 TOGGLE_LISTING_REQUEST = `${REDUCER_PREFIX}_TOGGLE_LISTING_REQUEST`;
+export const TOGGLE_LISTING_SUCCESS = `${REDUCER_PREFIX}_TOGGLE_LISTING_SUCCESS`;
+export const TOGGLE_LISTING_FAILURE = `${REDUCER_PREFIX}_TOGGLE_LISTING_FAILURE`;
 
-export const SET_SORT_BY = "SET_SORT_BY";
-export const SET_SHOW_DELETED = "SET_SHOW_DELETED";
+export const SET_SORT_BY = `${REDUCER_PREFIX}_SET_SORT_BY`;
+export const SET_SHOW_DELETED = `${REDUCER_PREFIX}_SET_SHOW_DELETED`;
 
 export const fetchListingRequest = () => ({ type: FETCH_LISTING_REQUEST });
 export const fetchListingSuccess = (listings) => ({
@@ -210,7 +212,7 @@ export const undeleteListing = (id) => {
 			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) {
+			if (restoredListing?.id) {
 				dispatch(undeleteListingSuccess(restoredListing));
 			} else {
 				// Trigger a refetch by dispatching the success with just ID, then fetch updated listings

package/src/actions/wizardActions.js

@@ -1,13 +1,3 @@
-/**
- * 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,
@@ -16,13 +6,18 @@ import {
 	selectFormFields,
 } from "../selectors/featureBuilderSelectors";
 
+import { clearFormSubmissionState } from "./formActions";
+
+import { values } from "../values.config";
+
 // 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) => ({
@@ -47,15 +42,10 @@ export const setCurrentStep = (step, previousStep = null) => ({
 });
 
 export const goToStep = (step) => (dispatch, getState) => {
-	const state = getState()[require("../values.config").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
-	const { clearFormSubmissionState } = require("./formActions");
 	dispatch(clearFormSubmissionState());
 
 	dispatch(setCurrentStep(step, currentStep));
@@ -143,10 +133,9 @@ const getFormValidation = (form, step) => {
 
 	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;
+			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,
@@ -158,12 +147,12 @@ const getFormValidation = (form, step) => {
 			};
 		}
 		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");
+			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 = {};
@@ -202,8 +191,7 @@ const getFormValidation = (form, step) => {
 			};
 		}
 		case "layout": {
-			const hasLayoutType =
-				form.layout && form.layout.type && form.layout.type.length > 0;
+			const hasLayoutType = form.layout?.type?.length > 0;
 			return {
 				isValid: hasLayoutType,
 				errors: {