@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.0 → 1.0.2-beta.10

package/src/screens/FormOverviewStep.jsx

@@ -1,14 +1,12 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SidebarLayout } from "../components/SidebarLayout.jsx";
 import {
 	GenericInput,
 	Text,
 	Button,
 	LoadingState,
-	SkeletonLoader,
 	ErrorBoundary,
 	FeatureBuilderWelcomePopup,
-	CenteredContainer,
 } from "../components";
 import ToastContainer from "../components/ToastContainer.jsx";
 import { values } from "../values.config.js";
@@ -20,11 +18,11 @@ import { withRouter } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import {
 	setDisplayName,
+	clearFormSubmissionState,
 	setIcon,
 	setInitialValues,
 	setTitle,
 	submitForm,
-	clearFormSubmissionState,
 } from "../actions/formActions";
 import {
 	selectFormIcon,
@@ -36,15 +34,11 @@ import {
 	selectIsEditMode,
 	selectIsStepValid,
 	selectStepErrors,
-	selectWizardMode,
 	selectFormIsSubmitting,
 	selectFormSubmitError,
 	selectFormSubmitSuccess,
 } from "../selectors/featureBuilderSelectors";
-import {
-	validateAndUpdateStep,
-	setCurrentStepAndSave,
-} from "../actions/wizardActions";
+import { validateAndUpdateStep } from "../actions/wizardActions";
 import IconSelector from "../components/IconSelector.jsx";
 import ExampleDisplay from "../components/ExampleDisplay.jsx";
 
@@ -130,7 +124,6 @@ const FormOverviewStepInner = (props) => {
 
 			// Clear submission state after showing toast (only for non-edit cases)
 			if (!isEditMode) {
-				const { clearFormSubmissionState } = require("../actions/formActions");
 				dispatch(clearFormSubmissionState());
 			}
 		}

package/src/screens/ListingScreen.jsx

@@ -46,7 +46,6 @@ import styles from "./ListingScreen.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPen, faTrash } from "@fortawesome/free-solid-svg-icons";
 
-
 const { Button, Text } = PlussCore.Components;
 
 const ListingScreen = (props) => {

package/src/selectors/featureBuilderSelectors.js

@@ -26,7 +26,7 @@ export const selectFormState = (state) => getFeatureBuilderState(state).form;
  */
 export const selectFormTitle = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.title;
+	return formState?.title;
 };
 
 /**
@@ -37,7 +37,7 @@ export const selectFormTitle = (state) => {
  */
 export const selectFormIcon = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.icon;
+	return formState?.icon;
 };
 
 /**
@@ -48,7 +48,7 @@ export const selectFormIcon = (state) => {
  */
 export const selectFormDisplayName = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.displayName;
+	return formState?.displayName;
 };
 
 /**
@@ -59,7 +59,7 @@ export const selectFormDisplayName = (state) => {
  */
 export const selectFormLayout = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.layout;
+	return formState?.layout;
 };
 
 /**
@@ -70,7 +70,7 @@ export const selectFormLayout = (state) => {
  */
 export const selectFormFields = (state) => {
 	const formState = selectFormState(state);
-	return (formState && formState.fields) || [];
+	return formState?.fields || [];
 };
 
 export const selectFormField = (fieldId) => (state) =>
@@ -78,21 +78,21 @@ export const selectFormField = (fieldId) => (state) =>
 
 export const selectFormIsInitial = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._isInitial;
+	return formState?._isInitial;
 };
 export const selectFormIsSubmitting = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._isSubmitting;
+	return formState?._isSubmitting;
 };
 
 export const selectFormSubmitError = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._submitError;
+	return formState?._submitError;
 };
 
 export const selectFormSubmitSuccess = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._submitSuccess;
+	return formState?._submitSuccess;
 };
 
 // ============ DEFINITION SELECTORS ============
@@ -102,31 +102,39 @@ export const selectDefinitionState = (state) =>
 
 export const selectDefinition = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.definition;
+	return definitionState?.definition;
 };
 export const selectDefinitionId = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.id;
+	return definitionState?.id;
 };
 export const selectDefinitionIsLoading = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.isLoading;
+	return definitionState?.isLoading;
 };
 export const selectDefinitionError = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.error;
+	return definitionState?.error;
 };
 export const selectDefinitionIsCreating = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.isCreating;
+	return definitionState?.isCreating;
 };
 export const selectDefinitionIsEditing = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.isEditing;
+	return definitionState?.isEditing;
+};
+export const selectDefinitionMode = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState?.mode;
 };
 
-// Check if we have a definition loaded
-export const selectHasDefinition = (state) => !!selectDefinition(state);
+// Check if we have a definition loaded or if we've determined the mode
+// This is used by hiddenFromFeaturePicker to determine if feature should be shown
+export const selectHasDefinition = (state) => {
+	const definition = selectDefinition(state);
+	return !!definition;
+};
 
 // ============ LISTINGS SELECTORS ============
 
@@ -135,35 +143,35 @@ export const selectListingsState = (state) =>
 
 export const selectListings = (state) => {
 	const listingsState = selectListingsState(state);
-	return (listingsState && listingsState.listings) || [];
+	return listingsState?.listings || [];
 };
 export const selectListingsIsLoading = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isLoading;
+	return listingsState?.isLoading;
 };
 export const selectListingsError = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.error;
+	return listingsState?.error;
 };
 export const selectListingsIsCreating = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isCreating;
+	return listingsState?.isCreating;
 };
 export const selectListingsIsEditing = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isEditing;
+	return listingsState?.isEditing;
 };
 export const selectListingsIsDeleting = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isDeleting;
+	return listingsState?.isDeleting;
 };
 export const selectListingsIsRestoring = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isRestoring;
+	return listingsState?.isRestoring;
 };
 export const selectListingsIsInitiallyLoaded = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isInitiallyLoaded;
+	return listingsState?.isInitiallyLoaded;
 };
 
 // Get a specific listing by ID
@@ -299,7 +307,7 @@ export const selectWizardState = (state) =>
 
 export const selectWizardMode = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.mode;
+	return wizardState?.mode;
 };
 
 // Mode detection selectors - wizard mode is the SINGLE SOURCE OF TRUTH for create/edit mode
@@ -311,57 +319,57 @@ export const selectIsEditMode = (state) => selectWizardMode(state) === "edit";
 
 export const selectNavigationState = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.navigation;
+	return wizardState?.navigation;
 };
 
 export const selectCurrentStep = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.currentStep;
+	return navigationState?.currentStep;
 };
 
 export const selectCanGoBack = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.canGoBack;
+	return navigationState?.canGoBack;
 };
 
 export const selectPreviousStep = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.previousStep;
+	return navigationState?.previousStep;
 };
 
 export const selectCanGoForward = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.canGoForward;
+	return navigationState?.canGoForward;
 };
 
 export const selectStepValidation = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.stepValidation;
+	return wizardState?.stepValidation;
 };
 
 export const selectStepValidationState = (step) => (state) => {
 	const stepValidation = selectStepValidation(state);
-	return stepValidation && stepValidation[step];
+	return stepValidation?.[step];
 };
 
 export const selectIsStepValid = (step) => (state) => {
 	const stepValidationState = selectStepValidationState(step)(state);
-	return stepValidationState && stepValidationState.isValid;
+	return stepValidationState?.isValid;
 };
 
 export const selectStepErrors = (step) => (state) => {
 	const stepValidationState = selectStepValidationState(step)(state);
-	return stepValidationState ? stepValidationState.errors : {};
+	return stepValidationState?.errors || {};
 };
 
 export const selectStepCompletion = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.stepCompletion;
+	return wizardState?.stepCompletion;
 };
 
 export const selectIsStepComplete = (step) => (state) => {
 	const stepCompletion = selectStepCompletion(state);
-	return stepCompletion && stepCompletion[step];
+	return stepCompletion?.[step];
 };
 
 export const selectAllStepsComplete = (state) => {
@@ -418,17 +426,13 @@ export const selectIsStepAccessible = (step) => (state) => {
 // Get current sort method
 export const selectSortBy = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.sortBy
-		? listingsState.sortBy
-		: "newest";
+	return listingsState?.sortBy || "newest";
 };
 
 // Get show deleted toggle state
 export const selectShowDeleted = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.showDeleted
-		? listingsState.showDeleted
-		: false;
+	return listingsState?.showDeleted || false;
 };
 
 // Get sorted and filtered listings