@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.7 → 1.0.2-beta.9

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/BaseFieldConfig.jsx

@@ -241,10 +241,10 @@ export const BaseFieldConfig = (props) => {
 						{setMaxImages && (
 							<GenericInput
 								type="number"
-								value={maxImages || 10}
-								placeholder="10"
+								value={maxImages || 16}
+								placeholder="16"
 								label="Maximum Images"
-								onChange={(e) => setMaxImages(parseInt(e.target.value) || 10)}
+								onChange={(e) => setMaxImages(parseInt(e.target.value) || 16)}
 								className={styles.fieldSpacing}
 								alwaysShowLabel
 							/>

package/src/components/FeatureBuilderSuccessPopup.jsx

@@ -4,12 +4,7 @@ const { Components } = PlussCore;
 const { Popup } = Components;
 import styles from "./FeatureBuilderSuccessPopup.module.css";
 
-const FeatureBuilderSuccessPopup = ({
-	isOpen,
-	onClose,
-	featureName,
-	displayName,
-}) => {
+const FeatureBuilderSuccessPopup = ({ isOpen, onClose, featureName }) => {
 	if (!isOpen) {
 		return null;
 	}
@@ -23,14 +18,14 @@ const FeatureBuilderSuccessPopup = ({
 		},
 	];
 
+	const capitalisedName =
+		featureName && featureName[0].toUpperCase() + featureName.slice(1);
+
 	return (
 		<Popup
-			title={`${featureName} Created`}
+			title={`${capitalisedName} Created`}
 			subtitle={
-				<>
-					<span>{featureName}</span> is now saved and available for your
-					communities!
-				</>
+				<>{capitalisedName} is now saved and available for your communities!</>
 			}
 			onClose={onClose}
 			buttons={buttons}
@@ -40,12 +35,11 @@ const FeatureBuilderSuccessPopup = ({
 		>
 			<div className={styles.successContent}>
 				<div className={styles.successMessage}>
-					To activate this feature, please add it to your sites using the
-					Feature Picker.
+					{capitalisedName} is saved and ready to go. To use it, add it to your
+					site using the <b>Feature Picker.</b>
 				</div>
 				<div className={styles.successMessage}>
-					Team members with the right permissions can start creating content for
-					the communities that have installed the feature.
+					Once added, your team can start creating content for the feature.
 				</div>
 			</div>
 		</Popup>

package/src/components/FeatureBuilderSuccessPopup.module.css

@@ -1,7 +1,6 @@
 .successContent {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
 	gap: 20px;
 	padding: 20px 0;
 }
@@ -30,11 +29,10 @@
 }
 
 .successMessage {
-	text-align: center;
-	color: #666;
 	font-size: 16px;
 	line-height: 1.5;
 	max-width: 400px;
+	color: #181c4a;
 }
 
 .featureName {