@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.5 → 1.0.2-beta.7

package/src/components/IconLoader.jsx

@@ -9,145 +9,145 @@ const { Apis } = PlussCore;
 const { fileActions } = Apis;
 
 const IconLoader = ({
-  value,
-  defaultValue,
-  onChange,
-  onRemove,
-  disableRemove = false,
-  featureId,
+	value,
+	defaultValue,
+	onChange,
+	onRemove,
+	disableRemove = false,
+	featureId,
 }) => {
-  const [isUploading, setIsUploading] = useState(false);
-  const fileInputRef = useRef(null);
-
-  // Determine which icon to show
-  const hasCustomIcon =
-    value && typeof value === "string" && value.startsWith("http");
-  const iconToShow = defaultValue || "star";
-
-  // Generate filename with feature ID
-  const generateFilename = (file, featureId) => {
-    const timestamp = Date.now();
-    const ext = file.name.split(".").pop();
-    return `build-your-feature-${featureId || "new"}-${timestamp}.${ext}`;
-  };
-
-  // Get FontAwesome icon component directly (no async needed)
-  const iconComponent = !hasCustomIcon ? iconImports[iconToShow] : null;
-
-  const handleFileSelect = async (event) => {
-    const file = event.target.files[0];
-    if (!file || isUploading) return;
-
-    // Validate file type - only accept images
-    if (!file.type.startsWith("image/")) {
-      alert("Please upload an image file (JPEG, PNG, GIF, or WebP)");
-      return;
-    }
-
-    setIsUploading(true);
-
-    try {
-      // Compress and upload the image
-      const compressedFile = await fileActions.compressImage(
-        file,
-        1400,
-        0.8,
-        false,
-      );
-
-      const filename = generateFilename(compressedFile, featureId);
-      const url = await fileActions.uploadMediaAsync(compressedFile, filename);
-
-      if (onChange) {
-        onChange(url);
-      }
-    } catch (error) {
-      alert("Failed to upload image. Please try again.");
-    } finally {
-      setIsUploading(false);
-      // Reset file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    }
-  };
-
-  const handleUploadClick = () => {
-    if (fileInputRef.current && !isUploading) {
-      fileInputRef.current.click();
-    }
-  };
-
-  const handleRemove = () => {
-    if (onRemove && !disableRemove) {
-      onRemove();
-    }
-  };
-
-  // Container will use CSS modules classes
-  // Custom styling through props is deprecated in favor of CSS consistency
-
-  return (
-    <div className={`${styles.iconLoader} ${styles.iconLoader__container}`}>
-      {/* Show the icon/image */}
-      {hasCustomIcon ? (
-        <img
-          src={value}
-          alt="Custom icon"
-          className={styles.iconLoader__image}
-        />
-      ) : (
-        <div className={styles.iconLoader__iconContainer}>
-          {iconComponent ? (
-            <FontAwesomeIcon
-              icon={iconComponent}
-              className={`${styles.iconLoader__icon} ${styles.iconLoader__iconLarge}`}
-            />
-          ) : (
-            <div className={styles.iconLoader__fallbackText}>{iconToShow}</div>
-          )}
-        </div>
-      )}
-
-      {/* Upload/Delete button overlay - only shows on hover */}
-      <div className={styles.iconLoader__buttonOverlay}>
-        {hasCustomIcon ? (
-          <Button
-            buttonType="secondary"
-            isActive
-            onClick={handleRemove}
-            disabled={disableRemove || isUploading}
-            size="small"
-            leftIcon="times"
-            aria-label="Delete icon"
-          >
-            Delete
-          </Button>
-        ) : (
-          <Button
-            buttonType="primary"
-            onClick={() => { }}
-            disabled={isUploading}
-            size="small"
-            leftIcon="upload"
-            loading={isUploading}
-            aria-label="Upload icon"
-          >
-            Upload
-          </Button>
-        )}
-      </div>
-
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/jpeg,image/png,image/gif,image/webp,image/svg"
-        onChange={handleFileSelect}
-        className={styles.iconLoader__hiddenInput}
-      />
-    </div>
-  );
+	const [isUploading, setIsUploading] = useState(false);
+	const fileInputRef = useRef(null);
+
+	// Determine which icon to show
+	const hasCustomIcon =
+		value && typeof value === "string" && value.startsWith("http");
+	const iconToShow = defaultValue || "star";
+
+	// Generate filename with feature ID
+	const generateFilename = (file, featureId) => {
+		const timestamp = Date.now();
+		const ext = file.name.split(".").pop();
+		return `build-your-feature-${featureId || "new"}-${timestamp}.${ext}`;
+	};
+
+	// Get FontAwesome icon component directly (no async needed)
+	const iconComponent = !hasCustomIcon ? iconImports[iconToShow] : null;
+
+	const handleFileSelect = async (event) => {
+		const file = event.target.files[0];
+		if (!file || isUploading) return;
+
+		// Validate file type - only accept images
+		if (!file.type.startsWith("image/")) {
+			alert("Please upload an image file (JPEG, PNG, GIF, or WebP)");
+			return;
+		}
+
+		setIsUploading(true);
+
+		try {
+			// Compress and upload the image
+			const compressedFile = await fileActions.compressImage(
+				file,
+				1400,
+				0.8,
+				false,
+			);
+
+			const filename = generateFilename(compressedFile, featureId);
+			const url = await fileActions.uploadMediaAsync(compressedFile, filename);
+
+			if (onChange) {
+				onChange(url);
+			}
+		} catch (error) {
+			alert("Failed to upload image. Please try again.");
+		} finally {
+			setIsUploading(false);
+			// Reset file input
+			if (fileInputRef.current) {
+				fileInputRef.current.value = "";
+			}
+		}
+	};
+
+	const handleUploadClick = () => {
+		if (fileInputRef.current && !isUploading) {
+			fileInputRef.current.click();
+		}
+	};
+
+	const handleRemove = () => {
+		if (onRemove && !disableRemove) {
+			onRemove();
+		}
+	};
+
+	// Container will use CSS modules classes
+	// Custom styling through props is deprecated in favor of CSS consistency
+
+	return (
+		<div className={`${styles.iconLoader} ${styles.iconLoader__container}`}>
+			{/* Show the icon/image */}
+			{hasCustomIcon ? (
+				<img
+					src={value}
+					alt="Custom icon"
+					className={styles.iconLoader__image}
+				/>
+			) : (
+				<div className={styles.iconLoader__iconContainer}>
+					{iconComponent ? (
+						<FontAwesomeIcon
+							icon={iconComponent}
+							className={`${styles.iconLoader__icon} ${styles.iconLoader__iconLarge}`}
+						/>
+					) : (
+						<div className={styles.iconLoader__fallbackText}>{iconToShow}</div>
+					)}
+				</div>
+			)}
+
+			{/* Upload/Delete button overlay - only shows on hover */}
+			<div className={styles.iconLoader__buttonOverlay}>
+				{hasCustomIcon ? (
+					<Button
+						buttonType="secondary"
+						isActive
+						onClick={handleRemove}
+						disabled={disableRemove || isUploading}
+						size="small"
+						leftIcon="times"
+						aria-label="Delete icon"
+					>
+						Delete
+					</Button>
+				) : (
+					<Button
+						buttonType="primary"
+						onClick={() => {}}
+						disabled={isUploading}
+						size="small"
+						leftIcon="upload"
+						loading={isUploading}
+						aria-label="Upload icon"
+					>
+						Upload
+					</Button>
+				)}
+			</div>
+
+			{/* Hidden file input */}
+			<input
+				ref={fileInputRef}
+				type="file"
+				accept="image/jpeg,image/png,image/gif,image/webp,image/svg"
+				onChange={handleFileSelect}
+				className={styles.iconLoader__hiddenInput}
+			/>
+		</div>
+	);
 };
 
 export default IconLoader;

package/src/components/IconSelector.jsx

@@ -6,7 +6,6 @@ import { allIcons, defaultIcon } from "./iconCategories";
 import { iconImports } from "./iconImports";
 import styles from "./IconSelector.module.css";
 
-
 const IconSelector = ({
 	selectedIcon,
 	onIconSelect,

package/src/components/ListingEditor.jsx

@@ -32,7 +32,6 @@ import {
 import { fetchFeatureDefinitions } from "../actions/featureDefinitionsIndex.js";
 import { values } from "../values.config.js";
 
-
 const ListingEditor = ({ mode = "create", listingId, onSuccess, onCancel }) => {
 	const isEditMode = mode === "edit";
 	const dispatch = useDispatch();

package/src/components/SidebarLayout.jsx

@@ -149,7 +149,10 @@ const SideBarInner = (props) => {
 			stepsWithUrls.forEach((step, index) => {
 				const navItem = Array.from(
 					document.querySelectorAll(".hub-wrapperContainer .sideNav-item"),
-				).find((item) => item.textContent && item.textContent.includes(`${index + 1}.`));
+				).find(
+					(item) =>
+						item.textContent && item.textContent.includes(`${index + 1}.`),
+				);
 
 				if (navItem) {
 					// Remove any existing click listeners

package/src/components/index.js

@@ -57,5 +57,3 @@ export { default as ToastContainer } from "./ToastContainer.jsx";
 // Gallery components
 export { default as ListingGalleryInput } from "./listing/ListingGalleryInput.jsx";
 export { default as GalleryDisplay } from "./listing/GalleryDisplay.jsx";
-
-

package/src/components/listing/GalleryDisplay.jsx

@@ -4,7 +4,6 @@ import { Text } from "../../components";
 import { iconImports } from "../../components/iconImports.js";
 import styles from "./GalleryDisplay.module.css";
 
-
 export const GalleryDisplay = (props) => {
 	const {
 		images = [],

package/src/components/listing/ListingGalleryInput.jsx

@@ -186,7 +186,10 @@ const ListingGalleryInput = ({
 						>
 							{images.map((image, index) => {
 								return (
-									<div key={`image-${index}`} className={galleryStyles.imageItem}>
+									<div
+										key={`image-${index}`}
+										className={galleryStyles.imageItem}
+									>
 										<img
 											src={image}
 											alt={`Gallery item ${index + 1}`}

package/src/index.js

@@ -18,12 +18,12 @@ export const Reducers = (() => {
 export const Screens = (() => {
 	const screens = {};
 
-	screens["FormOverviewStep"] = FormOverviewStep;
-	screens["FormFieldsStep"] = FormFieldsStep;
-	screens["FormLayoutStep"] = FormLayoutStep;
-	screens["ListingScreen"] = ListingScreen;
-	screens["CreateListingPage"] = CreateListingPage;
-	screens["EditListingPage"] = EditListingPage;
+	screens[values.screenFormOverviewStep] = FormOverviewStep;
+	screens[values.screenFormFieldsStep] = FormFieldsStep;
+	screens[values.screenFormLayoutStep] = FormLayoutStep;
+	screens[values.screenListingScreen] = ListingScreen;
+	screens[values.pageCreateListing] = CreateListingPage;
+	screens[values.pageEditListing] = EditListingPage;
 	return screens;
 })();
 

package/src/reducers/featureBuilderReducer.js

@@ -277,28 +277,21 @@ const formReducer = (state = INITIAL_FORM_STATE, 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;
+			const definitionWrapper = (payload && payload.featureDefinition) || payload;
+			const definition = (definitionWrapper && 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) || {
+				title: definition?.title || "",
+				icon: definition?.icon || "star",
+				displayName: definition?.displayName || "",
+				layout: definition?.layout || {
 					gridIcon: undefined,
 					type: "round",
 				},
-				fields:
-					definition && Array.isArray(definition.fields)
-						? definition.fields
-						: state.fields,
+				fields: Array.isArray(definition?.fields)
+					? definition.fields
+					: state.fields,
 			};
 
 			const newState = {
@@ -518,17 +511,13 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 				// Extract from API response for edit mode
 				// Handle nested structure: data.featureDefinition.definition
 				const featureDefinitionWrapper =
-					data && data.featureDefinition ? data.featureDefinition : data;
+					(data && data.featureDefinition) || data;
 				definition =
-					featureDefinitionWrapper && featureDefinitionWrapper.definition
-						? featureDefinitionWrapper.definition
-						: featureDefinitionWrapper;
-				definitionId =
-					(featureDefinitionWrapper && featureDefinitionWrapper.id) ||
-					values.featureId;
+					(featureDefinitionWrapper && featureDefinitionWrapper.definition) || featureDefinitionWrapper;
+				definitionId = (featureDefinitionWrapper && featureDefinitionWrapper.id) || values.featureId;
 
 				// Ensure fields array exists and preserves order property
-				if (definition && definition.fields) {
+				if (definition?.fields) {
 					// Create a new array to ensure we preserve all field properties including order
 					definition.fields = definition.fields.map((field) => ({
 						...field,
@@ -566,7 +555,7 @@ const definitionReducer = (state = INITIAL_STATE.definition, action) => {
 					definition: payload, // Optimistically update with new definition
 					mode: "edit", // Switch to edit mode immediately
 				},
-				id: payload && payload.id,
+				id: payload?.id,
 				error: null,
 			};
 

package/src/screens/FormLayoutStep.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { SidebarLayout } from "../components/SidebarLayout.jsx";
 import { values } from "../values.config.js";
 import { PlussCore } from "../feature.config";
@@ -7,10 +7,8 @@ import {
   Text,
   Button,
   LoadingState,
-  SkeletonLoader,
   IconLoader,
   ErrorBoundary,
-  CenteredContainer,
   FeatureBuilderSuccessPopup,
 } from "../components";
 import ToastContainer from "../components/ToastContainer.jsx";
@@ -20,7 +18,6 @@ import {
   setGridLayoutIcon,
   submitForm,
   clearFormSubmissionState,
-  setDisplayName,
   setInitialValues,
 } from "../actions/formActions";
 import {
@@ -30,7 +27,6 @@ import {
   selectIsEditMode,
   selectIsStepValid,
   selectStepErrors,
-  selectCurrentStep,
   selectFormIsSubmitting,
   selectFormSubmitError,
   selectFormSubmitSuccess,
@@ -61,8 +57,7 @@ const FormLayoutStepInner = (props) => {
   const isEditMode = useSelector(selectIsEditMode);
 
   // Use custom hook to handle definition loading
-  const { definition, definitionIsLoading, reloadDefinition } =
-    useFeatureDefinitionLoader();
+  const { definition, definitionIsLoading } = useFeatureDefinitionLoader();
 
   // Get form initialization state
   const isFormInitial = useSelector(selectFormIsInitial);
@@ -145,25 +140,29 @@ const FormLayoutStepInner = (props) => {
       value: "round",
       title: "Round Images",
       description: "Round photos in a grid",
-      image: "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/b8156f584c92a0edbe13a8e05d/fblayoutround.png",
+      image:
+        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/b8156f584c92a0edbe13a8e05d/fblayoutround.png",
     },
     {
       value: "condensed",
       title: "Compact List",
       description: "Small photos in a list",
-      image: "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/dfec30d342249a4073e5ffc6b8/fblayoutcompact.png",
+      image:
+        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/dfec30d342249a4073e5ffc6b8/fblayoutcompact.png",
     },
     {
       value: "square",
       title: "Square Images",
       description: "Square photos in a grid",
-      image: "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/771e4626462a93041746a746c8/fblayoutsquare.png",
+      image:
+        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/771e4626462a93041746a746c8/fblayoutsquare.png",
     },
     {
       value: "feature",
       title: "Large Photos",
       description: "Big photos with details",
-      image: "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/f48acc614508ba246186b12845/fblayoutcardslarge.png",
+      image:
+        "https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:b5bebf26-ee4c-c29c-88c8-ec859245e17b/public/f48acc614508ba246186b12845/fblayoutcardslarge.png",
     },
   ];
 
@@ -314,10 +313,8 @@ const FormLayoutStepInner = (props) => {
             onChange={() => { }} // Disabled
             onRemove={() => { }} // Disabled
             featureId={definitionId || "new"}
-
           />
 
-
           <Text type="help" color="#6c757d" className="marginTop-16">
             We're working on bringing the ability to use custom grid icons
           </Text>