@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.8 → 1.0.4-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +8 -8
- package/package.json +11 -11
- package/src/actions/formActions.js +148 -148
- package/src/actions/wizardActions.js +166 -166
- package/src/components/listing/ListingFileInput.module.css +1 -1
- package/src/components/listing/ListingGalleryInput.module.css +2 -2
- package/src/images/full.png +0 -0
- package/src/images/fullNoTitle.png +0 -0
- package/src/images/previewWidget.png +0 -0
- package/src/images/widget.png +0 -0
- package/src/reducers/featureBuilderReducer.js +10 -4
- package/src/screens/FormLayoutStep.jsx +421 -420
- package/src/screens/FormOverviewStep.jsx +349 -349
- package/src/values.config.default.js +49 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plusscommunities/pluss-feature-builder-web-b",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4-beta.0",
|
|
4
4
|
"description": "Contains the feature builder extension for the pluss communities ",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"scripts": {
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
"@babel/runtime": "^7.14.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@fortawesome/fontawesome-svg-core": "
|
|
43
|
-
"@fortawesome/free-solid-svg-icons": "
|
|
44
|
-
"@fortawesome/react-fontawesome": "
|
|
45
|
-
"@plusscommunities/pluss-core-web": "
|
|
46
|
-
"lodash": "
|
|
47
|
-
"moment": "
|
|
48
|
-
"react": "
|
|
49
|
-
"react-bootstrap": "
|
|
50
|
-
"react-dom": "
|
|
51
|
-
"react-fontawesome": "
|
|
42
|
+
"@fortawesome/fontawesome-svg-core": "*",
|
|
43
|
+
"@fortawesome/free-solid-svg-icons": "*",
|
|
44
|
+
"@fortawesome/react-fontawesome": "*",
|
|
45
|
+
"@plusscommunities/pluss-core-web": "*",
|
|
46
|
+
"lodash": "*",
|
|
47
|
+
"moment": "*",
|
|
48
|
+
"react": "*",
|
|
49
|
+
"react-bootstrap": "*",
|
|
50
|
+
"react-dom": "*",
|
|
51
|
+
"react-fontawesome": "*"
|
|
52
52
|
},
|
|
53
53
|
"keywords": []
|
|
54
54
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { featureDefinitionActions } from "../webapi/featuresActions";
|
|
2
2
|
import { values } from "../values.config";
|
|
3
3
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
updateFeatureBuilderString,
|
|
5
|
+
updateFeatureBuilderIcon,
|
|
6
6
|
} from "./featureBuilderStringsActions";
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -30,20 +30,20 @@ import {
|
|
|
30
30
|
*/
|
|
31
31
|
|
|
32
32
|
export const actionsTypes = {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
33
|
+
SET_INITIAL_VALUES: `${values.reducerKey.toUpperCase()}_SET_INITIAL_VALUES`,
|
|
34
|
+
SET_TITLE: `${values.reducerKey.toUpperCase()}_SET_TITLE`,
|
|
35
|
+
SET_ICON: `${values.reducerKey.toUpperCase()}_SET_ICON`,
|
|
36
|
+
SET_DISPLAY_NAME: `${values.reducerKey.toUpperCase()}_SET_DISPLAY_NAME`,
|
|
37
|
+
ADD_FIELD: `${values.reducerKey.toUpperCase()}_ADD_FIELD`,
|
|
38
|
+
DELETE_FIELD: `${values.reducerKey.toUpperCase()}_DELETE_FIELD`,
|
|
39
|
+
UPDATE_FIELD: `${values.reducerKey.toUpperCase()}_UPDATE_FIELD`,
|
|
40
|
+
SET_LAYOUT_GRID_ICON: `${values.reducerKey.toUpperCase()}_SET_LAYOUT_GRID_ICON`,
|
|
41
|
+
SET_LAYOUT_TYPE: `${values.reducerKey.toUpperCase()}_SET_LAYOUT_TYPE`,
|
|
42
|
+
SUBMIT_FORM_REQUEST: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_REQUEST`,
|
|
43
|
+
SUBMIT_FORM_SUCCESS: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_SUCCESS`,
|
|
44
|
+
SUBMIT_FORM_FAILURE: `${values.reducerKey.toUpperCase()}_SUBMIT_FORM_FAILURE`,
|
|
45
|
+
CLEAR_FORM_SUBMISSION_STATE: `${values.reducerKey.toUpperCase()}_CLEAR_FORM_SUBMISSION_STATE`,
|
|
46
|
+
SET_SUMMARY_FIELD: `${values.reducerKey.toUpperCase()}_SET_SUMMARY_FIELD`,
|
|
47
47
|
};
|
|
48
48
|
|
|
49
49
|
/**
|
|
@@ -66,11 +66,11 @@ export const actionsTypes = {
|
|
|
66
66
|
* }));
|
|
67
67
|
*/
|
|
68
68
|
export const setInitialValues = (initialValues) => {
|
|
69
|
-
|
|
69
|
+
return { type: actionsTypes.SET_INITIAL_VALUES, payload: initialValues };
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
export const setTitle = (title) => {
|
|
73
|
-
|
|
73
|
+
return { type: actionsTypes.SET_TITLE, payload: title };
|
|
74
74
|
};
|
|
75
75
|
|
|
76
76
|
/**
|
|
@@ -85,16 +85,16 @@ export const setTitle = (title) => {
|
|
|
85
85
|
* dispatch(setDisplayName('Contact Information'));
|
|
86
86
|
*/
|
|
87
87
|
export const setDisplayName = (displayName) => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
return (dispatch) => {
|
|
89
|
+
// Update menu string when display name changes (will be title cased in updateFeatureBuilderString)
|
|
90
|
+
dispatch(updateFeatureBuilderString(displayName));
|
|
91
91
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
92
|
+
// Dispatch the actual action
|
|
93
|
+
dispatch({
|
|
94
|
+
type: actionsTypes.SET_DISPLAY_NAME,
|
|
95
|
+
payload: displayName,
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
98
|
};
|
|
99
99
|
|
|
100
100
|
/**
|
|
@@ -108,16 +108,16 @@ export const setDisplayName = (displayName) => {
|
|
|
108
108
|
* dispatch(setIcon('fa-user'));
|
|
109
109
|
*/
|
|
110
110
|
export const setIcon = (icon) => {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
111
|
+
return (dispatch) => {
|
|
112
|
+
// Update menu icon when icon changes
|
|
113
|
+
dispatch(updateFeatureBuilderIcon(icon));
|
|
114
114
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
115
|
+
// Dispatch the actual action
|
|
116
|
+
dispatch({
|
|
117
|
+
type: actionsTypes.SET_ICON,
|
|
118
|
+
payload: icon,
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
121
|
};
|
|
122
122
|
|
|
123
123
|
/**
|
|
@@ -132,20 +132,20 @@ export const setIcon = (icon) => {
|
|
|
132
132
|
* dispatch(addField('image'));
|
|
133
133
|
*/
|
|
134
134
|
export const addField = (fieldType = "text") => {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
135
|
+
// Generate a unique ID for the new field
|
|
136
|
+
const fieldId = `custom-field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
137
|
+
return {
|
|
138
|
+
type: actionsTypes.ADD_FIELD,
|
|
139
|
+
payload: { id: fieldId, type: fieldType },
|
|
140
|
+
};
|
|
141
141
|
};
|
|
142
142
|
|
|
143
143
|
export const deleteField = (id) => {
|
|
144
|
-
|
|
144
|
+
return { type: actionsTypes.DELETE_FIELD, payload: id };
|
|
145
145
|
};
|
|
146
146
|
|
|
147
147
|
export const updateFieldById = (id, updatedField) => {
|
|
148
|
-
|
|
148
|
+
return { type: actionsTypes.UPDATE_FIELD, payload: { id, updatedField } };
|
|
149
149
|
};
|
|
150
150
|
|
|
151
151
|
/**
|
|
@@ -160,31 +160,31 @@ export const updateFieldById = (id, updatedField) => {
|
|
|
160
160
|
* dispatch(setSummaryField('field-description-123'));
|
|
161
161
|
*/
|
|
162
162
|
export const setSummaryField = (fieldId) => {
|
|
163
|
-
|
|
163
|
+
return { type: actionsTypes.SET_SUMMARY_FIELD, payload: fieldId };
|
|
164
164
|
};
|
|
165
165
|
|
|
166
166
|
export const setGridLayoutIcon = (imageUrl) => {
|
|
167
|
-
|
|
167
|
+
return { type: actionsTypes.SET_LAYOUT_GRID_ICON, payload: imageUrl };
|
|
168
168
|
};
|
|
169
169
|
|
|
170
170
|
export const setLayoutType = (layoutType) => {
|
|
171
|
-
|
|
171
|
+
return { type: actionsTypes.SET_LAYOUT_TYPE, payload: layoutType };
|
|
172
172
|
};
|
|
173
173
|
|
|
174
174
|
const submitFormRequest = () => {
|
|
175
|
-
|
|
175
|
+
return { type: actionsTypes.SUBMIT_FORM_REQUEST };
|
|
176
176
|
};
|
|
177
177
|
|
|
178
178
|
const submitFormSuccess = () => {
|
|
179
|
-
|
|
179
|
+
return { type: actionsTypes.SUBMIT_FORM_SUCCESS };
|
|
180
180
|
};
|
|
181
181
|
|
|
182
182
|
const submitFormFailure = (error) => {
|
|
183
|
-
|
|
183
|
+
return { type: actionsTypes.SUBMIT_FORM_FAILURE, payload: error };
|
|
184
184
|
};
|
|
185
185
|
|
|
186
186
|
export const clearFormSubmissionState = () => {
|
|
187
|
-
|
|
187
|
+
return { type: actionsTypes.CLEAR_FORM_SUBMISSION_STATE };
|
|
188
188
|
};
|
|
189
189
|
|
|
190
190
|
/**
|
|
@@ -195,107 +195,107 @@ export const clearFormSubmissionState = () => {
|
|
|
195
195
|
* @throws {Error} When form validation fails or API submission encounters error
|
|
196
196
|
*/
|
|
197
197
|
export function submitForm() {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
198
|
+
return async (dispatch, getState) => {
|
|
199
|
+
const state = getState()[values.reducerKey];
|
|
200
|
+
const form = state?.form;
|
|
201
|
+
if (!form) {
|
|
202
|
+
dispatch(
|
|
203
|
+
submitFormFailure(
|
|
204
|
+
new Error(
|
|
205
|
+
"Form data is missing. Please refresh the page and try again.",
|
|
206
|
+
),
|
|
207
|
+
),
|
|
208
|
+
);
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
211
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
212
|
+
dispatch(submitFormRequest());
|
|
213
|
+
try {
|
|
214
|
+
// Get site from auth store
|
|
215
|
+
const site = getState().auth.site;
|
|
216
|
+
if (!site) {
|
|
217
|
+
throw new Error(
|
|
218
|
+
"Authentication error: Site context not found. Please refresh and login again.",
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
221
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
222
|
+
// Use mode from fetch instead of checking definition ID
|
|
223
|
+
const definitionState = state?.definition;
|
|
224
|
+
const mode = definitionState?.mode; // Use stored mode from fetch
|
|
225
|
+
const definitionId = definitionState?.id;
|
|
226
226
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
227
|
+
if (mode === "edit") {
|
|
228
|
+
// Always update when in edit mode
|
|
229
|
+
const updatedDefinition = {
|
|
230
|
+
id: definitionId,
|
|
231
|
+
site: site, // Include site from auth store
|
|
232
|
+
featureDefinition: {
|
|
233
|
+
// Wrap in expected structure for backend
|
|
234
|
+
title: form.title,
|
|
235
|
+
icon: form.icon,
|
|
236
|
+
displayName: form.displayName,
|
|
237
|
+
layout: form.layout,
|
|
238
|
+
fields: form.fields,
|
|
239
|
+
},
|
|
240
|
+
};
|
|
241
|
+
await featureDefinitionActions.edit(updatedDefinition, site);
|
|
242
|
+
} else {
|
|
243
|
+
// Always create when in create mode (or mode is undefined/null)
|
|
244
|
+
if (!values.featureId || !site) {
|
|
245
|
+
throw new Error(
|
|
246
|
+
"Authentication error: Missing required context (featureId or site).",
|
|
247
|
+
);
|
|
248
|
+
}
|
|
249
|
+
await featureDefinitionActions.create(
|
|
250
|
+
values.featureId,
|
|
251
|
+
site, // Use actual site from auth store
|
|
252
|
+
{
|
|
253
|
+
title: form.title,
|
|
254
|
+
icon: form.icon,
|
|
255
|
+
displayName: form.displayName,
|
|
256
|
+
layout: form.layout,
|
|
257
|
+
fields: form.fields,
|
|
258
|
+
},
|
|
259
|
+
);
|
|
260
|
+
}
|
|
261
261
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
262
|
+
dispatch(submitFormSuccess());
|
|
263
|
+
} catch (err) {
|
|
264
|
+
// Handle different types of errors
|
|
265
|
+
let errorToDisplay = err;
|
|
266
266
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
267
|
+
if (err.response) {
|
|
268
|
+
// API error (400, 401, 404, 500, etc.)
|
|
269
|
+
const { status, data } = err.response;
|
|
270
|
+
if (status === 400 && data?.error) {
|
|
271
|
+
errorToDisplay = new Error(`Validation error: ${data.error}`);
|
|
272
|
+
} else if (status === 401) {
|
|
273
|
+
errorToDisplay = new Error(
|
|
274
|
+
"You are not authorized to perform this action",
|
|
275
|
+
);
|
|
276
|
+
} else if (status === 404) {
|
|
277
|
+
errorToDisplay = new Error("Feature definition not found");
|
|
278
|
+
} else if (status >= 500) {
|
|
279
|
+
errorToDisplay = new Error("Server error. Please try again later.");
|
|
280
|
+
} else {
|
|
281
|
+
errorToDisplay = new Error(
|
|
282
|
+
data?.error || `Request failed with status ${status}`,
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
|
+
} else if (err.request) {
|
|
286
|
+
// Network error (no response received)
|
|
287
|
+
errorToDisplay = new Error(
|
|
288
|
+
"Network error. Please check your connection and try again.",
|
|
289
|
+
);
|
|
290
|
+
} else if (err.message) {
|
|
291
|
+
// Other JavaScript errors
|
|
292
|
+
errorToDisplay = err;
|
|
293
|
+
} else {
|
|
294
|
+
// Unknown error
|
|
295
|
+
errorToDisplay = new Error("An unexpected error occurred while saving");
|
|
296
|
+
}
|
|
297
297
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
298
|
+
dispatch(submitFormFailure(errorToDisplay));
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
301
|
}
|