powr-sdk-web 5.6.8 → 5.6.9

package/dist/forms/admin.js

@@ -52,39 +52,43 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     isSaving = _useState0[0],
     setIsSaving = _useState0[1];
-  var _useState1 = (0, _react.useState)({
+  var _useState1 = (0, _react.useState)(''),
+    _useState10 = _slicedToArray(_useState1, 2),
+    createFeedback = _useState10[0],
+    setCreateFeedback = _useState10[1];
+  var _useState11 = (0, _react.useState)({
       formTitle: '',
       formName: '',
       formId: '',
       fields: []
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    formDraft = _useState10[0],
-    setFormDraft = _useState10[1];
-  var _useState11 = (0, _react.useState)(null),
     _useState12 = _slicedToArray(_useState11, 2),
-    selectedForm = _useState12[0],
-    setSelectedForm = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
+    formDraft = _useState12[0],
+    setFormDraft = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    showDetailModal = _useState14[0],
-    setShowDetailModal = _useState14[1];
-  var _useState15 = (0, _react.useState)('responses'),
+    selectedForm = _useState14[0],
+    setSelectedForm = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    activeTab = _useState16[0],
-    setActiveTab = _useState16[1];
-  var _useState17 = (0, _react.useState)([]),
+    showDetailModal = _useState16[0],
+    setShowDetailModal = _useState16[1];
+  var _useState17 = (0, _react.useState)('responses'),
     _useState18 = _slicedToArray(_useState17, 2),
-    formResponses = _useState18[0],
-    setFormResponses = _useState18[1];
-  var _useState19 = (0, _react.useState)(0),
+    activeTab = _useState18[0],
+    setActiveTab = _useState18[1];
+  var _useState19 = (0, _react.useState)([]),
     _useState20 = _slicedToArray(_useState19, 2),
-    responseCount = _useState20[0],
-    setResponseCount = _useState20[1];
-  var _useState21 = (0, _react.useState)(false),
+    formResponses = _useState20[0],
+    setFormResponses = _useState20[1];
+  var _useState21 = (0, _react.useState)(0),
     _useState22 = _slicedToArray(_useState21, 2),
-    loadingResponses = _useState22[0],
-    setLoadingResponses = _useState22[1];
+    responseCount = _useState22[0],
+    setResponseCount = _useState22[1];
+  var _useState23 = (0, _react.useState)(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    loadingResponses = _useState24[0],
+    setLoadingResponses = _useState24[1];
   var fetchForms = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _yield$apiCall, data, ok, _t;
@@ -190,6 +194,12 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+  var notify = function notify(type, message) {
+    setCreateFeedback(message);
+    if (onFormAction) {
+      onFormAction(type, message);
+    }
+  };
   var resetFormDraft = function resetFormDraft() {
     setFormDraft({
       formTitle: '',
@@ -201,6 +211,19 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   var slugify = function slugify(value) {
     return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '').slice(0, 32);
   };
+  var uniqueFieldName = function uniqueFieldName(label, index, fields) {
+    var taken = fields.map(function (field) {
+      return field.name;
+    }).filter(Boolean);
+    var base = slugify(label) || "field".concat(index + 1);
+    var candidate = base;
+    var suffix = 2;
+    while (taken.includes(candidate)) {
+      candidate = "".concat(base).concat(suffix);
+      suffix += 1;
+    }
+    return candidate;
+  };
   var addField = function addField(type) {
     var index = formDraft.fields.length + 1;
     setFormDraft(function (prev) {
@@ -236,17 +259,16 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   };
   var createForm = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, payload, _yield$apiCall3, result, ok, errorMessage, _t3;
+      var trimmedTitle, trimmedName, trimmedId, hasInvalidField, fieldNames, duplicateNames, payload, _yield$apiCall3, result, ok, errorMessage, _t3;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.p = _context3.n) {
           case 0:
+            setCreateFeedback('');
             if (projectId) {
               _context3.n = 1;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Project ID is required');
-            }
+            notify('error', 'Project ID is required');
             return _context3.a(2);
           case 1:
             trimmedTitle = formDraft.formTitle.trim();
@@ -256,18 +278,14 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
               _context3.n = 2;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Form title, name, and ID are required');
-            }
+            notify('error', 'Form title, name, and ID are required');
             return _context3.a(2);
           case 2:
             if (!(formDraft.fields.length === 0)) {
               _context3.n = 3;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Add at least one field');
-            }
+            notify('error', 'Add at least one field');
             return _context3.a(2);
           case 3:
             hasInvalidField = formDraft.fields.some(function (field) {
@@ -278,13 +296,24 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
               _context3.n = 4;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Each field needs a name and label');
-            }
+            notify('error', 'Each field needs a name and label');
             return _context3.a(2);
           case 4:
+            fieldNames = formDraft.fields.map(function (field) {
+              return field.name.trim();
+            });
+            duplicateNames = fieldNames.filter(function (name, index) {
+              return fieldNames.indexOf(name) !== index;
+            });
+            if (!(duplicateNames.length > 0)) {
+              _context3.n = 5;
+              break;
+            }
+            notify('error', "Each field needs a unique name. Duplicate: ".concat(_toConsumableArray(new Set(duplicateNames)).join(', ')));
+            return _context3.a(2);
+          case 5:
             setIsSaving(true);
-            _context3.p = 5;
+            _context3.p = 6;
             payload = {
               formTitle: trimmedTitle,
               formName: trimmedName,
@@ -300,48 +329,45 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
                 } : {});
               })
             };
-            _context3.n = 6;
+            _context3.n = 7;
             return (0, _auth.apiCall)(apiUrl, "/forms/create-form", projectId, {
               method: 'POST',
               body: payload
             });
-          case 6:
+          case 7:
             _yield$apiCall3 = _context3.v;
             result = _yield$apiCall3.data;
             ok = _yield$apiCall3.ok;
             if (ok) {
-              _context3.n = 7;
+              _context3.n = 8;
               break;
             }
             throw new Error(result.message || 'Failed to create form');
-          case 7:
-            if (onFormAction) {
-              onFormAction('success', result.message || 'Form created successfully!');
-            }
+          case 8:
+            notify('success', result.message || 'Form created successfully!');
             resetFormDraft();
+            setCreateFeedback('');
             setShowCreateModal(false);
             fetchForms();
             if (onRefresh) {
               onRefresh();
             }
-            _context3.n = 9;
+            _context3.n = 10;
             break;
-          case 8:
-            _context3.p = 8;
+          case 9:
+            _context3.p = 9;
             _t3 = _context3.v;
             console.error('Error creating form:', _t3);
             errorMessage = _t3 instanceof Error ? _t3.message : 'Failed to create form';
-            if (onFormAction) {
-              onFormAction('error', errorMessage);
-            }
-          case 9:
-            _context3.p = 9;
-            setIsSaving(false);
-            return _context3.f(9);
+            notify('error', errorMessage);
           case 10:
+            _context3.p = 10;
+            setIsSaving(false);
+            return _context3.f(10);
+          case 11:
             return _context3.a(2);
         }
-      }, _callee3, null, [[5, 8, 9, 10]]);
+      }, _callee3, null, [[6, 9, 10, 11]]);
     }));
     return function createForm() {
       return _ref4.apply(this, arguments);
@@ -379,6 +405,7 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   }, "Create and manage your dynamic forms")), /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
       resetFormDraft();
+      setCreateFeedback('');
       setShowCreateModal(true);
     },
     className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
@@ -442,7 +469,9 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-3xl max-h-[90vh] overflow-y-auto"
   }, /*#__PURE__*/_react["default"].createElement("h2", {
     className: "text-xl font-bold text-gray-800 mb-6"
-  }, "Create New Form"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Create New Form"), createFeedback && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+  }, createFeedback), /*#__PURE__*/_react["default"].createElement("div", {
     className: "space-y-6"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "grid grid-cols-1 md:grid-cols-2 gap-4"
@@ -539,8 +568,12 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       type: "text",
       value: field.label,
       onChange: function onChange(e) {
-        return updateField(index, {
-          label: e.target.value
+        var label = e.target.value;
+        updateField(index, {
+          label: label,
+          name: uniqueFieldName(label, index, formDraft.fields.filter(function (_, i) {
+            return i !== index;
+          }))
         });
       },
       placeholder: "Label",
@@ -581,12 +614,15 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
   })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex justify-end gap-4 mt-6"
   }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     onClick: function onClick() {
       resetFormDraft();
+      setCreateFeedback('');
       setShowCreateModal(false);
     },
     className: "bg-gray-300 text-gray-700 hover:bg-gray-400 px-4 py-2 rounded-md"
   }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     onClick: createForm,
     disabled: isSaving,
     className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "5.6.8",
+    "version": "5.6.9",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",