powr-sdk-web 5.6.7 → 5.6.9

package/dist/forms/admin.js

@@ -8,6 +8,15 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _auth = require("../utils/auth");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
@@ -39,38 +48,47 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     showCreateModal = _useState8[0],
     setShowCreateModal = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
+  var _useState9 = (0, _react.useState)(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    selectedFile = _useState0[0],
-    setSelectedFile = _useState0[1];
-  var _useState1 = (0, _react.useState)(false),
+    isSaving = _useState0[0],
+    setIsSaving = _useState0[1];
+  var _useState1 = (0, _react.useState)(''),
     _useState10 = _slicedToArray(_useState1, 2),
-    isUploading = _useState10[0],
-    setIsUploading = _useState10[1];
-  var _useState11 = (0, _react.useState)(null),
+    createFeedback = _useState10[0],
+    setCreateFeedback = _useState10[1];
+  var _useState11 = (0, _react.useState)({
+      formTitle: '',
+      formName: '',
+      formId: '',
+      fields: []
+    }),
     _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;
@@ -176,86 +194,185 @@ 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: '',
+      formName: '',
+      formId: '',
+      fields: []
+    });
+  };
+  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) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fields: [].concat(_toConsumableArray(prev.fields), [_objectSpread({
+          name: "field".concat(index),
+          label: "Field ".concat(index),
+          type: type,
+          required: false
+        }, type === 'radio' ? {
+          options: ['Option 1', 'Option 2']
+        } : {})])
+      });
+    });
+  };
+  var updateField = function updateField(index, updates) {
+    setFormDraft(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fields: prev.fields.map(function (field, i) {
+          return i === index ? _objectSpread(_objectSpread({}, field), updates) : field;
+        })
+      });
+    });
+  };
+  var removeField = function removeField(index) {
+    setFormDraft(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fields: prev.fields.filter(function (_, i) {
+          return i !== index;
+        })
+      });
+    });
+  };
   var createForm = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var formData, _yield$apiCall3, result, ok, errorMessage, _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:
-            if (!(!projectId || !selectedFile)) {
+            setCreateFeedback('');
+            if (projectId) {
               _context3.n = 1;
               break;
             }
-            if (onFormAction) {
-              onFormAction('error', 'Please select a JSON file to upload');
-            }
+            notify('error', 'Project ID is required');
             return _context3.a(2);
           case 1:
-            setIsUploading(true);
-            _context3.p = 2;
-            formData = new FormData();
-            formData.append('jsonFile', selectedFile);
-            _context3.n = 3;
+            trimmedTitle = formDraft.formTitle.trim();
+            trimmedName = formDraft.formName.trim();
+            trimmedId = formDraft.formId.trim();
+            if (!(!trimmedTitle || !trimmedName || !trimmedId)) {
+              _context3.n = 2;
+              break;
+            }
+            notify('error', 'Form title, name, and ID are required');
+            return _context3.a(2);
+          case 2:
+            if (!(formDraft.fields.length === 0)) {
+              _context3.n = 3;
+              break;
+            }
+            notify('error', 'Add at least one field');
+            return _context3.a(2);
+          case 3:
+            hasInvalidField = formDraft.fields.some(function (field) {
+              var _field$name, _field$label;
+              return !((_field$name = field.name) !== null && _field$name !== void 0 && _field$name.trim()) || !((_field$label = field.label) !== null && _field$label !== void 0 && _field$label.trim());
+            });
+            if (!hasInvalidField) {
+              _context3.n = 4;
+              break;
+            }
+            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 = 6;
+            payload = {
+              formTitle: trimmedTitle,
+              formName: trimmedName,
+              formId: trimmedId,
+              fields: formDraft.fields.map(function (field) {
+                return _objectSpread({
+                  name: field.name.trim(),
+                  label: field.label.trim(),
+                  type: field.type,
+                  required: !!field.required
+                }, field.type === 'radio' ? {
+                  options: field.options || []
+                } : {});
+              })
+            };
+            _context3.n = 7;
             return (0, _auth.apiCall)(apiUrl, "/forms/create-form", projectId, {
               method: 'POST',
-              body: formData
+              body: payload
             });
-          case 3:
+          case 7:
             _yield$apiCall3 = _context3.v;
             result = _yield$apiCall3.data;
             ok = _yield$apiCall3.ok;
             if (ok) {
-              _context3.n = 4;
+              _context3.n = 8;
               break;
             }
-            errorMessage = result.message || 'Failed to create form';
-            throw new Error(errorMessage);
-          case 4:
-            if (onFormAction) {
-              onFormAction('success', result.message || 'Form created successfully!');
-            }
-            setSelectedFile(null);
+            throw new Error(result.message || 'Failed to create form');
+          case 8:
+            notify('success', result.message || 'Form created successfully!');
+            resetFormDraft();
+            setCreateFeedback('');
             setShowCreateModal(false);
             fetchForms();
             if (onRefresh) {
               onRefresh();
             }
-            _context3.n = 6;
+            _context3.n = 10;
             break;
-          case 5:
-            _context3.p = 5;
+          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);
-            }
-            setSelectedFile(null);
-            setShowCreateModal(false);
-          case 6:
-            _context3.p = 6;
-            setIsUploading(false);
-            return _context3.f(6);
-          case 7:
+            errorMessage = _t3 instanceof Error ? _t3.message : 'Failed to create form';
+            notify('error', errorMessage);
+          case 10:
+            _context3.p = 10;
+            setIsSaving(false);
+            return _context3.f(10);
+          case 11:
             return _context3.a(2);
         }
-      }, _callee3, null, [[2, 5, 6, 7]]);
+      }, _callee3, null, [[6, 9, 10, 11]]);
     }));
     return function createForm() {
       return _ref4.apply(this, arguments);
     };
   }();
-  var handleFileChange = function handleFileChange(e) {
-    var _e$target$files;
-    var file = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
-    if (file && file.type === 'application/json') {
-      setSelectedFile(file);
-    } else {
-      if (onFormAction) {
-        onFormAction('error', 'Please select a valid JSON file');
-      }
-    }
-  };
   var handleViewForm = function handleViewForm(form) {
     setSelectedForm(form);
     setActiveTab('responses');
@@ -287,7 +404,9 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
     className: "text-gray-600 mt-1"
   }, "Create and manage your dynamic forms")), /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
-      return setShowCreateModal(true);
+      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"
   }, /*#__PURE__*/_react["default"].createElement("svg", {
@@ -345,38 +464,169 @@ var PowrFormsAdmin = function PowrFormsAdmin(_ref) {
       className: "text-sm text-gray-500"
     }, ((_form$fields = form.fields) === null || _form$fields === void 0 ? void 0 : _form$fields.length) || 0, " fields"));
   })))), showCreateModal && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
+    className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 p-4"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "bg-white rounded-2xl shadow-xl p-8 w-full max-w-lg"
+    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", {
-    className: "space-y-4"
+  }, "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"
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "jsonFile",
+    htmlFor: "formTitle",
     className: "block text-sm font-medium text-gray-700 mb-1"
-  }, "JSON Form Schema *"), /*#__PURE__*/_react["default"].createElement("input", {
-    id: "jsonFile",
-    name: "jsonFile",
-    type: "file",
-    accept: ".json",
-    onChange: handleFileChange,
-    required: true,
+  }, "Form Title *"), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "formTitle",
+    type: "text",
+    value: formDraft.formTitle,
+    onChange: function onChange(e) {
+      var formTitle = e.target.value;
+      setFormDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          formTitle: formTitle,
+          formName: prev.formName || slugify(formTitle)
+        });
+      });
+    },
+    placeholder: "Genkit Workshop Registration",
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "formId",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Form ID *"), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "formId",
+    type: "text",
+    value: formDraft.formId,
+    onChange: function onChange(e) {
+      return setFormDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          formId: e.target.value.toUpperCase()
+        });
+      });
+    },
+    placeholder: "KHA2025A2",
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "md:col-span-2"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "formName",
+    className: "block text-sm font-medium text-gray-700 mb-1"
+  }, "Form Name (URL slug) *"), /*#__PURE__*/_react["default"].createElement("input", {
+    id: "formName",
+    type: "text",
+    value: formDraft.formName,
+    onChange: function onChange(e) {
+      return setFormDraft(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          formName: slugify(e.target.value)
+        });
+      });
+    },
+    placeholder: "workshopform",
     className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
   }), /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-xs text-gray-500 mt-1"
-  }, "Upload a JSON file containing your form schema"))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "Used in URLs like `/forms?id=workshopform`"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex items-center justify-between mb-3"
+  }, /*#__PURE__*/_react["default"].createElement("h3", {
+    className: "text-sm font-semibold text-gray-900"
+  }, "Fields"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex flex-wrap gap-2"
+  }, ['text', 'email', 'textarea', 'radio', 'fileUploader'].map(function (type) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: type,
+      type: "button",
+      onClick: function onClick() {
+        return addField(type);
+      },
+      className: "px-3 py-1 text-xs rounded-full border border-gray-300 hover:bg-gray-50"
+    }, "+ ", type);
+  }))), formDraft.fields.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "rounded-lg border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500"
+  }, "Add fields using the buttons above") : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "space-y-4"
+  }, formDraft.fields.map(function (field, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: "".concat(field.name, "-").concat(index),
+      className: "rounded-lg border border-gray-200 p-4 space-y-3"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex items-center justify-between"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "text-sm font-medium text-gray-700 capitalize"
+    }, field.type, " field"), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      onClick: function onClick() {
+        return removeField(index);
+      },
+      className: "text-sm text-red-600 hover:text-red-700"
+    }, "Remove")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "grid grid-cols-1 md:grid-cols-2 gap-3"
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      type: "text",
+      value: field.label,
+      onChange: function onChange(e) {
+        var label = e.target.value;
+        updateField(index, {
+          label: label,
+          name: uniqueFieldName(label, index, formDraft.fields.filter(function (_, i) {
+            return i !== index;
+          }))
+        });
+      },
+      placeholder: "Label",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md"
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      type: "text",
+      value: field.name,
+      onChange: function onChange(e) {
+        return updateField(index, {
+          name: slugify(e.target.value)
+        });
+      },
+      placeholder: "name",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md"
+    })), /*#__PURE__*/_react["default"].createElement("label", {
+      className: "flex items-center gap-2 text-sm text-gray-700"
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      type: "checkbox",
+      checked: !!field.required,
+      onChange: function onChange(e) {
+        return updateField(index, {
+          required: e.target.checked
+        });
+      }
+    }), "Required"), field.type === 'radio' && /*#__PURE__*/_react["default"].createElement("textarea", {
+      value: (field.options || []).join('\n'),
+      onChange: function onChange(e) {
+        return updateField(index, {
+          options: e.target.value.split('\n').map(function (option) {
+            return option.trim();
+          }).filter(Boolean)
+        });
+      },
+      placeholder: "One option per line",
+      rows: 3,
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md"
+    }));
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex justify-end gap-4 mt-6"
   }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     onClick: function onClick() {
-      return setShowCreateModal(false);
+      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: isUploading || !selectedFile,
+    disabled: isSaving,
     className: "bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md disabled:opacity-50"
-  }, isUploading ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, isSaving ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "animate-spin h-5 w-5 mx-auto border-2 border-white border-t-transparent rounded-full"
   }) : 'Create Form')))), showDetailModal && selectedForm && /*#__PURE__*/_react["default"].createElement("div", {
     className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"

package/package.json

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